Скрыть объявление
Вышла новая версия XenForo 1.5.13 Nulled By XenForo.Info. Поспешите обновить свои форумы на новую версию прямо сейчас!

Добавляем Font Awesome к вкладкам в панели навигации

Добавляем Font Awesome к вкладкам в панели навигации.

  1. TopicStarter Overlay
    Hope

    Hope Администрация

    Сообщения:
    38264
    Симпатии:
    44607
    Пол:
    Мужской
    Пользователь Hope разместил новый ресурс:

    Добавляем Font Awesome к вкладкам в панели навигации - Добавляем Font Awesome к вкладкам в панели навигации.

    Узнать больше об этом ресурсе...
     
    Skaiman, Mirovinger и koris нравится это.
  2. koris

    koris Проверенные

    Сообщения:
    113
    Симпатии:
    80
    Пол:
    Мужской
    Может немного оффтоп... но все же:
    Советов по использованию Font Awesome уже достаточно встречается на форуме...

    Может быть их как то систематизировать и выложить в отдельной теме?
    Чтобы не приходилось каждый раз искать по всему форуму?
     
  3. TopicStarter Overlay
    Hope

    Hope Администрация

    Сообщения:
    38264
    Симпатии:
    44607
    Пол:
    Мужской
    Не может быть. :-)
     
    koris нравится это.
  4. Time

    Time Проверенные

    Сообщения:
    567
    Симпатии:
    231
    Пол:
    Мужской
    font-family: FontAwesome; - Код иконки вводить тут?
     
  5. Mirovinger

    Mirovinger Администрация

    Сообщения:
    10858
    Симпатии:
    20669
    Код:
    .navTab.forums .navLink:before {
    content: '\f0e6';
    font-family: FontAwesome;
    font-size: 15px;
    font-weight: normal;
    padding-right: 3px;
    }
    Код иконки меняем здесь.
    Выделил красным.
     
    Time и Hope нравится это.
  6. Time

    Time Проверенные

    Сообщения:
    567
    Симпатии:
    231
    Пол:
    Мужской
    Mirovinger и Hope нравится это.
  7. >.P.S.I.X.<

    >.P.S.I.X.< Проверенные

    Сообщения:
    424
    Симпатии:
    71
    Пол:
    Мужской
    вот я не понял, а откуда надо брать код иконки ?
     
  8. Time

    Time Проверенные

    Сообщения:
    567
    Симпатии:
    231
    Пол:
    Мужской
    Снимок экрана 2015-01-19 в 4.39.30.png
    Unicode: f0c4
     
    Sonkir, Hope и >.P.S.I.X.< нравится это.
  9. >.P.S.I.X.<

    >.P.S.I.X.< Проверенные

    Сообщения:
    424
    Симпатии:
    71
    Пол:
    Мужской
    но а где брать такие картинка или ка их делать?

    Вроде понял где их брать,но когда вставил в кнопку форум то выглядит так Screenshot_1.png , а пользователи вообще не отображается
     
  10. Mirovinger

    Mirovinger Администрация

    Сообщения:
    10858
    Симпатии:
    20669
    А Font Awesome, Вы вообще подключили?
     
    Hope нравится это.
  11. >.P.S.I.X.<

    >.P.S.I.X.< Проверенные

    Сообщения:
    424
    Симпатии:
    71
    Пол:
    Мужской
    а как его подключить?
     
  12. Mirovinger

    Mirovinger Администрация

    Сообщения:
    10858
    Симпатии:
    20669
  13. Laseg

    Laseg Проверенные

    Сообщения:
    143
    Симпатии:
    150
    Мой вариант проще для добавления новых иконок:

    Код:
    .navTabs .navLink:before{position: absolute;width: 0px;left: 0px;font-family: FontAwesome;font-size: 15px;display: block;}
    .navTabs .navLink{padding-left: 16px;}
    .navTab.forums .navLink:before{content: "\f0e6";}
    .navTab.members .navLink:before{content: "\f0c0";}
    .navTab.showcase .navLink:before{content: "\f07a";}
    .navTab.sonnb_xengallery .navLink:before{content: "\f030";}
    .navTab.xfa-blogs .navLink:before{content: "\f1b9";}
    .navTab.portal .navLink:before{content: "\f015";}
     
    Последнее редактирование модератором: 2 фев 2015
  14. Skaiman

    Skaiman Проверенные

    Сообщения:
    6844
    Симпатии:
    11823
    Пол:
    Мужской
    Но не совсем правильный :-) зачем там абсолютное позиционирование? Тогда уж так:
    Код:
    .navTab .navLink:before {
    font-family: FontAwesome;
    font-size: 15px;
    font-weight: normal;
    padding-right: 3px;
    }
    .navTab.forums .navLink:before{content: "\f0e6";}
    .navTab.members .navLink:before{content: "\f0c0";}
    .navTab.showcase .navLink:before{content: "\f07a";}
    .navTab.sonnb_xengallery .navLink:before{content: "\f030";}
    .navTab.xfa-blogs .navLink:before{content: "\f1b9";}
    .navTab.portal .navLink:before{content: "\f015";}
     
  15. Laseg

    Laseg Проверенные

    Сообщения:
    143
    Симпатии:
    150
    Абсолютное позиционирование нужно, чтобы вкладки не рвало на разных стилях. Скрин кинуть, что происходит с вашим кодом на недефолтном стиле?
     
  16. Skaiman

    Skaiman Проверенные

    Сообщения:
    6844
    Симпатии:
    11823
    Пол:
    Мужской
    Скрин я сам кинуть могу
    2015-02-02_005244.png
    Ни чего не происходит, если нормальный стиль :-)

    У тебя рвет по другой причине, ты сделал иконку блочным элементом, это подразумевает перенос строки в начале и в конце элемента, а ширину блока делаешь 0.
    Такое впечатление, что ты подставил значения, методом тыка, даже не понимая особо, что делаешь :-)
     
    Последнее редактирование: 2 фев 2015
    ikutaxova нравится это.
  17. Malezha

    Malezha Проверенные

    Сообщения:
    125
    Симпатии:
    65
    Пол:
    Мужской
    Skaiman,
     
  18. Skaiman

    Skaiman Проверенные

    Сообщения:
    6844
    Симпатии:
    11823
    Пол:
    Мужской
    Malezha, да какая разница, просто я написал, что сделано не правильно, можно на любом сделать, но не таким неграмотным способом.
     
  19. Laseg

    Laseg Проверенные

    Сообщения:
    143
    Симпатии:
    150
    Нормальный метод, грамотный. :-)
    А вот что получилось с вашей правкой:
    upload_2015-2-2_8-58-57.png
    Названия вкладок сказали "давайдосвиданья".
    Так что, оставлю я свою правку. С ней вкладки навигации выглядят вот так:
    upload_2015-2-2_9-14-29.png
     
    Последнее редактирование: 2 фев 2015
  20. s7ranger

    s7ranger Проверенные

    Сообщения:
    49
    Симпатии:
    19
    Добавьте в мануал код для главной
    Не знаю имеет смысл дополнить в мануал или нет, решайте сами.
    Если добавлен в меню свой пункт меню - Дополнительная вкладка в меню навигации, то вместо
    надо вставить
    где ХХХ-любые символы, а следовательно для иконки код будет таким
     
    Последнее редактирование: 17 апр 2015
    ikutaxova, Mirovinger и Hope нравится это.
www.megastock.ru

Email: XenForo.Info@yandex.ru. Skype: XenForo.Info