Подскажите, как вставить иконки в меню навигации как на сайте LS

сделал отдельный компонент для пунктов меню навигации, но в сайдбаре:
{component 'nav' hook='user_profile' activeItem=$sMenuProfileItemSelect mods='stacked' classes='external-userbar' hookParams=[ 'oUserProfile' => $oUserCurrent ] items=[
            [ 'name' => 'whois',      'text' => {lang name='user.profile.nav.info'},         'url' => "{$oUserCurrent->getUserWebPath()}" ],
            [ 'name' => 'wall',       'text' => {lang name='user.profile.nav.wall'},         'url' => "{$oUserCurrent->getUserWebPath()}wall/", 'count' => $iUserCurrentCountWall ],
            [ 'name' => 'created',    'text' => {lang name='user.profile.nav.publications'}, 'url' => "{$oUserCurrent->getUserWebPath()}created/topics/", 'count' => $iUserCurrentCountCreated ],
            [ 'name' => 'favourites', 'text' => {lang name='user.profile.nav.favourite'},    'url' => "{$oUserCurrent->getUserWebPath()}favourites/topics/", 'count' => $iUserCurrentCountFavourite ],
            [ 'name' => 'friends',    'text' => {lang name='user.profile.nav.friends'},      'url' => "{$oUserCurrent->getUserWebPath()}friends/", 'count' => $iUserCurrentCountFriends ],
            [ 'name' => 'activity',   'text' => {lang name='user.profile.nav.activity'},     'url' => "{$oUserCurrent->getUserWebPath()}stream/" ],
            [ 'name' => 'talk',       'text' => {lang name='user.profile.nav.messages'},     'url' => "{router page='talk'}", 'count' => $iUserCurrentCountTalkNew ],
            [ 'name' => 'settings',   'text' => {lang name='user.profile.nav.settings'},     'url' => "{router page='settings'}" ],
            [ 'name' => 'admin',      'text' => {lang name='admin.title'},                   'url' => "{router page='admin'}", 'is_enabled' => $oUserCurrent && $oUserCurrent->isAdministrator() ],
            [ 'name' => 'logout',     'text' => {lang name='auth.logout'},                   'url' => "{router page='auth'}logout/?security_ls_key={$LIVESTREET_SECURITY_KEY}" ]
        ]}


хочу перед каждым элементом меню поставить заранее прорисованную иконку в формате *.png как здесь:



… но при добавлении div'a с «классом» для добавления url картинки в css перед каждым из элементов, сайт выводит белый экран. то же самое если поставить тег
<p></p>
между элементами. хотелось бы знать как реализовать сей простой замысел на Live Street 2.0.1. заранее большое спасибо!

27 комментариев

avatar
Там как я помню в лс смарти шаблонизатор. Попробуйте в а файлах шаблона поковыряться которые на .tpl заканчиваются.
avatar
возможно, Вы, неправильно поняли, мне надо на LS 2.0.1 прикрутить иконки. на 1.0.3 проще простого я это уже делал. там сразу ul li и между ними меню-элементы, даже вроде как с иконками я не помню уже. все равно спасибо и с праздником Вас!
avatar
Посмотри компонент icon в плагине док, там можно сразу в nav через FontAwesome добавить иконкиПолучается скорее всего на скрине component icon выступает параметром для nav
Через параметр mods еще можешь добавить свой дополнительный класс для стилей, если захочешь выставить картинки на фон в png.https://github.com/livestreet/livestreet/wiki/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%BE%D0%B2-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0
avatar
к сожалению, у меня в application\plugins\docs нету файла icon. иконки вчера нарисовал, даже в ФШ выработал технику целую по рисованию иконок при помощи пера (Pen Tool). спасибо, но не помогло.
avatar
ваш.сайт/docs/icon
я очень старался =)
avatar
если нужна своя кастомная иконка)
делай все так же как описано выше, но придумай уникальное имя для иконки и в своем css напиши

.fa-mysuper-icon:before {
 background-image: url(...);
 ....
}


и ничего не надо будет мудрить с classes mods и другими параметрами.
avatar
если не понял, могу примеров набросать. мне не сложно)
avatar
мои извинения, пропустил Ваши комментарии. вопрос уже решился. спасибо за отзывчивость.
avatar
но при добавлении div'a с «классом» для добавления url картинки в css перед каждым из элементов, сайт выводит белый экран. то же самое если поставить тег

Нарушение синтаксиса, даже если параметр не существует, но синтаксис верный, то «белого экрана» не будет.
Например: [ 'text' => $aLang.user.users, 'ZXC' => 'text', 'url' => {router page='/'}, 'name' => 'MK' ]
Параметра ZXC нет в стандартном компоненте, но синтаксис соблюдается.

Далее. У элементом компонента nav есть возможность указывать иконку перед элементом, делается это так:
[ 'text' => $aLang.blog.blogs, icon => 'address-book-o', 'url' => {router page='blogs'}, 'name' => 'blogs' ]
avatar
Забыл! Иконки берутся из текущего шрифта font-awesome, т.е. если есть свои иконки то нужно подходить к вопросу иначе.

Как засунуть свои иконки в шрифт не подскажу, использование CSS поможет решить проблему. В элемент компонента nav добавляй по примеру icon:
classes => 'your-class'
avatar
вот это вроде работает, еще пока класс не создавал (голова разболелась), но по ходу я не внимательный, мог бы заметить что в этом синтаксисе classes работает везде. спасибо огромное просто, Вы меня спасли. и писателям плагинов меньше 'мелкой' работы, и мне как пользователю ЛС, которому хотелось бы увидеть результат вчерашней проделанной работы с созданием иконок.
avatar
попробовал.
1-ый вариант показывает иконку записной книжки с AwesomeFont по центру;
2-ой вариант (я так понял, что «добавляй по примеру icon:» пропущено слово «вместо» перед «icon:») работает вот так, и css ничего не меняет:



пробовал text-align: center; не помогает. если поставить в css ширину значка то показывает сам значек текстовая ссылка пропадает и вместо нее "...".
avatar
text-align то вроде не то, но в любом случае я знаю css, пусть порой и методом тыка )
avatar
чтобы не показалось, проблема не решена с awesomefont работает прекрасно, иначе не.
avatar
К каждому пункту меню, к которому нужна иконка, добавляете свой класс, как писали выше, например:

[ 'name' => 'whois', 'text' => {lang name='user.profile.nav.info'},         'url' => "{$oUserCurrent->getUserWebPath()}", 'classes' => 'icon icon-people' ],


Далее, прописываете общие стили для всех Ваших иконок:

.icon:before {
  font-family: my-icon-pack;
  display: inline-block;
  margin-right: 3px;
  color: #999;
  ...
}


И индивидуальные для каждой:

.icon-people:before {
  content: '\0526';
}


Если иконки сделаны картинками, то соответственно прописываете адреса к ним, вместо font-family, content…
avatar
получилось, благодаря Вам и Вашему способу. только один косяк, не так, чтоб это сильно меня беспокоило, но есть немного: иконка не реагирует как гиперссылка. а так спасибо естественно. если бы я достаточно окреп то накрутил бы рейтинг Вам и crs.
avatar
Тогда свойства прописывайте не для элемента списка, а для ссылки в элементе, т.е. так:

.icon > a:before {
  ...
}
avatar
не помогло, png пропадает.
avatar
Есть живой пример посмотреть?
avatar


какой то очень странный путь к картинке

avatar
а нет путь правильный недосмотрел что он сжат
avatar
да, примера на сайте нету, пользуюсь wamp.
avatar
Я Вам сами свойства для примера приводил, все подряд писать не нужно.

.icon:before {
font-family: my-icon-pack;
display: inline-block;
margin-right: 3px;
color: #999;

}
avatar
Сорри отправил нечаянно недописав…
avatar
У Вас как-то так будет:

.icon > a:before {
  display: inline-block;
  margin-right: 5px;
}

.profile-icon > a:before {
  ...
}


т.е. в profile-icon тоже ссылку надо было добавить, а то правилом ".icon > a" Вы задали свойства для ссылки, а правилом ".profile-icon" — для элемента списка.
avatar
спасибо! теперь работает. не был уверен что мне помогут, но все таки есть добрые люди на свете.
avatar
дико извиняюсь, работает. в классе .ls-nav-item-link.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.