Комментарий #3340339
grin3671grin3671

grin3671
в топике Обсуждение клуба CSS-club – настройка внешнего вида сайта
@EngiNier, про подключение шрифтов на примере Font Awesome:

Так как на официальном сайте теперь нет нормальной инструкции под подключению, то пишем свою, под все иконочные шрифты.

Подключение иконочного шрифта ничем не отличается от обычного шрифта, надо найти место где хранятся эти самые шрифты в интернете в свободном доступе и доступные по защищенному подключению.

Подключение шрифта

К счастью, этим шрифтом пользуются в Bootstrap, а у них в свою очередь есть CDN. По ссылке нам предлагают скопировать CSS файл, но нам это не доступно, поэтому лезем внутрь файла и копируем оттуда настройки подключения шрифта. Если весь код похож на кашу, читать невозможно, обычно можно просто убрать .min из ссылки: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css. Ссылки на шрифты относительны, поэтому их надо привести в порядок:
../fonts/fontawesome-webfont.eot?v=4.7.0
превращаем в это:
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0
, а так как Шики все подряд через camo пропускает, то преобразуем дальше в это:
//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0
(благо, CDN доступна по https, если нет, то ищите нормальный хостинг, CDN или убирайте с конца ссылки всю ерунду, типа такого: ?v=4.7.0)


Настройки шрифта

Когда весь шрифт подключен, надо разобраться с настройками шрифта. Обычно такие правила идут сразу за подключением шрифта и содержат в себе такое свойство: font-family: 'ТутНазваниеШрифта';. Копируем это правило, а селектор от него мы будем менять на что-то своё, к примеру, на это:
.profile-actions .settings:before {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
Обычно используется всего одно правило, где указывается общие настройки шрифта для всех иконок на сайте, но шики у нас надмозг, поэтому селекторов в этом наборе правил будет кхм.. много.


Настройки иконок

Далее сами иконки. Они обычно обозначаются буквой (как на шики), словом (как в Material Icons) или символами юникода. И тут нас поджидает новая кхм.. подлянка. В CSS шики обрубает не только @import, script, но и обратный слеш: \. Слеш и символ за ним игнорируются, как-будто у нас тут регулярки какие-то. Я уверен, что есть способ обойти это, но я не нашел ничего умнее, чем это:
.profile-actions .settings:before {
  content: '\\_f0ad';
}
, где f0ad – символ юникода иконки, который можно найти на странице иконок шрифта, под самой иконкой: http://fontawesome.io/icon/wrench/


Итоговый код с примером

В конечном итоге у нас должно получится следующее: правила подключения шрифта, правила с настройками шрифта и отдельные правила с указанием где какая иконка будет отображаться. Также не забываем о лицензировании и правилах приличия: копируем комментарий с авторами и условиями лицензии к себе в стиль: 
/**
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */

@font-face {
  font-family: 'FontAwesome';
  src: url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
       url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
       url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
       url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
       url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Это настройки шрифта, сюда можно добавлять другие селекторы,
   где будут применяться такие же правила. */
.profile-actions .mail:before,
.profile-actions .talk:before,
.profile-actions .fav-add:before,
.profile-actions .fav-remove:before,
.profile-actions .ignore-add:before,
.profile-actions .ignore-remove:before,
.profile-actions .settings:before,
.profile-actions .ban:before {
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Это правила задающие конкретную иконку конкретному элементу. */
.profile-actions .mail:before {
  content: '\\_f0e0';
}
.profile-actions .talk:before {
  content: '\\_f086';
}
.profile-actions .fav-add:before {
  content: '\\_f234';
}
.profile-actions .fav-remove:before {
  content: '\\_f007';
}
.profile-actions .fav-remove:hover:before {
  content: '\\_f235';
}
.profile-actions .ignore-add:before,
.profile-actions .ignore-remove:hover:before {
  content: '\\_f06e';
}
.profile-actions .ignore-add:hover:before,
.profile-actions .ignore-remove:before {
  content: '\\_f070';
}
.profile-actions .settings:before {
  content: '\\_f0ad';
}
.profile-actions .ban:before {
  content: '\\_f24e';
}

/* Это отдельные правила для иконок под аватаркой, они могут как совпадать,
   так и отличаться от настроек других иконок в вашем стиле. */
.profile-actions .mail:before,
.profile-actions .talk:before,
.profile-actions .fav-add:before,
.profile-actions .fav-remove:before,
.profile-actions .ignore-add:before,
.profile-actions .ignore-remove:before,
.profile-actions .settings:before,
.profile-actions .ban:before {
  font-size: 18px;
}


P.S. Лучшей альтернативой всем этим шрифтам является SVG, так что если размер кода не очень смущает, то, думаю, стоит использовать именно SVG.
@EngiNier, @grin3671, @grin3671
Ответы
EngiNier
EngiNier#
@grin3671, Большое спасибо за инструкцию!
grin3671
grin3671#
@grin3671, использование Font Awesome CDN (версия 5.0.11, стиль solid): 
@font-face {
  font-family: 'Font Awesome\ 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url(https://use.fontawesome.com/releases/v5.0.11//webfonts/fa-solid-900.eot);
  src: url(https://use.fontawesome.com/releases/v5.0.11//webfonts/fa-solid-900.eot?#iefix) format('embedded-opentype'),
       url(https://use.fontawesome.com/releases/v5.0.11//webfonts/fa-solid-900.woff2) format('woff2'),
       url(https://use.fontawesome.com/releases/v5.0.11//webfonts/fa-solid-900.woff) format('woff'),
       url(https://use.fontawesome.com/releases/v5.0.11//webfonts/fa-solid-900.ttf) format('truetype'),
       url(https://use.fontawesome.com/releases/v5.0.11//webfonts/fa-solid-900.svg#fontawesome) format('svg');
}
Список иконок: fontawesome.com
Вместо
Copy Unicode
, думаю, можно использовать
Copy Glyph
на странице иконки: fontawesome.com
@grin3671
grin3671
grin3671#
@grin3671, 
@font-face {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 900;
  src: url(https://use.fontawesome.com/releases/v5.15.3/webfonts/fa-solid-900.eot);
  src: url(https://use.fontawesome.com/releases/v5.15.3/webfonts/fa-solid-900.eot?#iefix) format('embedded-opentype'),
       url(https://use.fontawesome.com/releases/v5.15.3/webfonts/fa-solid-900.woff2) format('woff2'),
       url(https://use.fontawesome.com/releases/v5.15.3/webfonts/fa-solid-900.woff) format('woff'),
       url(https://use.fontawesome.com/releases/v5.15.3/webfonts/fa-solid-900.ttf) format('truetype'),
       url(https://use.fontawesome.com/releases/v5.15.3/webfonts/fa-solid-900.svg#fontawesome) format('svg');
}

.fa-icon {
  font-family: FontAwesome;
}

.fa-icon[data-icon="cog"]::before {
  content: ''; /* Copy Glyph */
  content: '\f013'; /* Обратный слеш + Copy Unicode */
}
[div=fa-icon data-icon=cog][/div]
Список иконок: fontawesome.com
Страница иконки из примера: fontawesome.com
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode