Вы здесь

Как добавить font-awesome иконки в меню, сохраняя шрифт ссылки меню

0

Добрый день, хочу меню оформить иконками, подключил модуль menu attributes, скачала font-awesome с гита, кинул css-ку и папку fonts в мою тему, в настройках темы подключил css-ку от font-awesome и добавил класс в одну из ссылок fa fa-home

В итоге имею иконку и ссылку, всё ок... НО - шрифт стал аля Times New Roman у шрифта текста ссылки
нагугли здесь http://dannyenglander.com/blog/drupal-theming-adding-font-awesome-icons-...

что в css свою надо добавить

#primary-nav a.fa {
 font-family: arial, sans-serif;
}
#primary-nav a.fa:before {
 margin-right: 1em;
  font-family: FontAwesome;
}

где primary-nav - это ID менюшки, добавил, поменял на свою ID - разницы никакой

что не так делаю?

Версия Drupal: 
7.x
Категория: 
Theming
Вопрос задан 17.12.2015 - 13:27

Ответы

0

1) Надо же и саму иконку добавить. например

#primary-nav a.fa:before {
 margin-right: 1em;
  font-family: FontAwesome;
    content: "\f08c";
}

2) И проверьте правильно ли вообще подключен FontAwesome.

Разграничение по шрифтам текста и иконки в формате:

#primary-nav a.fa {
 font-family: arial, sans-serif;
}
#primary-nav a.fa:before {
  font-family: FontAwesome;
}

у меня корректно работает.

Ответ дан 17.12.2015 - 13:41
0

рекомендую самостоятельно подготовить файл шрифта, путем добавления только используемых иконок, ибо килобайты гонять в холостую не комильфо. http://app.fontastic.me скажем умеет такое, пользовался недавно, все ок.

далее подключить в стилях темы шрифт, если не знакомы с реализацией: fontastic, например, выдает готовый @font-face, ctrl+c/ctrl+v все тривиально

в меню проставить уникальные классы для пунктов, делается на уровне темы, в adaptivetheme есть из коробки, можно подсмотреть

и остается только css

#primary-nav .id-111:before,
#primary-nav .id-112:before и т.д. { 
  font-family: my-super-ico-font;
}
#primary-nav .id-111:before {
    content: "__"; // значение, если использовать тот же fontastic, можно взять из референс файла
}    

можно сократить код, если отказаться от перечисления .id-111, .id-112 и т.д., добавив селектор к пунктам, где нужны иконка, но это уже надо смотреть на конкретное оформление. скажем, если это только для корневых пунктов — тогда несложно.

зы а можно и SVG юзать

Ответ дан 18.12.2015 - 13:20
0
a[href="#"]:before {
  content: "\f010"; // коды см. на http://fontawesome.io/cheatsheet/
  font-weight: normal;
  display: inline-block;
  font-family: FontAwesome;
  font-size: inherit;
  padding-right: 5px;
}

Удобно привязывать иконки к ссылкам с настроенным ЧПУ (как вариант), подчеркнутые ссылки нормально выглядят..

Ответ дан 08.01.2016 - 10:34