web-dev-qa-db-ja.com

cssでfontelloのアイコンを使用するにはどうすればよいですか？

私は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に入れるコードの種類を知るにはどうすればよいですか？

htmlcsspseudo-elementicon-fontsfontello
10
user1694077

さて、あなたがしなければならないことは、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>
19
user1694077