Как использовать значки из fontello в моем css?

Я использовал entypo (загруженный с entypo.com) и отображал значки следующим образом:

.icon:before {
  display: inline-block;
  font-family: 'Entypo';
  text-decoration: none;
  speak: none;
}

.email:before {
  content: "\2709";
}

Довольно стандартный. Но поскольку хинтинг отключен при загрузке с entypo.com, я переключился на загрузку с fontello. Только теперь мои коды содержимого css больше не работают.

В демоверсии я вижу, что fontello использует такие промежутки для вызова значков из html:

<span class="i-code">0xe829</span>

Но мне это кажется некрасивым. Я хочу сделать это из css, но как я могу узнать, какие коды вставлять в свой css?


html css icon-fonts pseudo-element fontello
person Community    schedule 04.10.2013    source источник

Ответы (1)


arrow_upward
21
arrow_downward

Итак, я узнал, что вам нужно не использовать коды, как указано в fontello:

U+E84D
U+E854

Но перепишите их на:

\E84D
\E854

(поэтому удалите «U+» и замените его на «\»)

Используйте их так:

content: "\E84D";

РЕДАКТИРОВАТЬ:

Итак, по запросу полный синтаксис CSS, который вы могли бы использовать, выглядит следующим образом:

.icon:before {
  display: inline-block;
  font-family: 'Entypo';
  text-decoration: none;
  speak: none;
}

.email:before {
  content: "\E84D";
}

В сочетании со следующим HTML:

<a href="#" class="icon email">Mail me</a>
person Community    schedule 04.10.2013
comment
не могли бы вы показать полный тег с исправлением? Я не понимаю. - person krivar; 31.03.2014
comment
@krivar, хорошо, я добавил полный синтаксис. Коды содержимого css можно найти здесь: gist.github.com/pnull/4510484. Дайте мне знать, если у вас есть еще вопросы! - person ; 31.03.2014