css グラフィックアイコンを使う

基本

基本、各アイコンフォントの提供元にやりかたが書いているので従えばいい。

とはいえ、提供元が分からなかったり・・・色々と大人の事情ってヤツもあったりする。

サンプル

・フォントのファイルが「〇〇〇.eot」等。
・「font-family」を「〇×△□」とする。

@font-face {
  font-family: '〇×△□';
  src: url('〇〇〇.eot');
  src: url('〇〇〇.eot?#iefix') format('embedded-opentype'),
       url('〇〇〇.woff2') format('woff2'),
       url('〇〇〇.woff') format('woff'),
       url('〇〇〇.ttf') format('truetype'),
       url('〇〇〇.svg#glyphicons_halflingsregular') format('svg');
}

.〇〇 {
  font-family: '〇×△□';
  content: "\e219";
}

※「content」は使う文字の文字コードを指定

・「font-face」で使うフォントの初期設定
・使いたいトコで「font-face」で指定した「font-family」の値を使ってアイコンを設定