Комментарий от EngiNier

Комментарий #3338577

в топике Обсуждение клуба CSS-club – настройка внешнего вида сайта 7 октября 2017

Здравствуйте. Вроде в faq не нашел. Интересует вопрос насчет этого:

l-top_menu .menu-items>.entry.info>a:before {
    font-family: shikimori;
    content: "i";
}

Вижу что есть шрифт шики, и каждый символ латиницы отвечает за какой-то значек, где можно увидеть полную таблицу данных значков?

@Darkza ушёл на MAL, @grin3671

Ответы

Darkza ушёл на MAL 7 октября 2017#

@EngiNier, shikimori.org
По этой ссылке ты можешь получить сам шрифт, а дальше уже просто через что-нибудь открой его или конвертируй, чтобы посмотреть, что там есть

@EngiNier

grin3671 8 октября 2017#

@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

Твой комментарий

Комментарий #3338577 EngiNier

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

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

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

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

Комментарий #3338577
EngiNier