小さなアイコンフォントのアイコンを作成する方法

1、まず第一に行くことができiconfont.cnしたいアイコンアリババベクトルフォントライブラリのダウンロード（SNGのためのフォーマット選択
形式）。

2、オープンiconmoon（このような）このサイトは、その後の右上隅をクリックしてIconfont App
下図：
画像のキャプション

3、紫の上Import Iconsをクリックして、あなたの次に良いのアップロードSVGアイコンを。

4、良いアップロードSVGアイコンを以下に示しますUntitled Set類似していトップを選択して、笔編集にクリックし、アイコンの形状を。上記セレクタを説明します。
。鼠标箭头表しは选择图标
。垃圾桶を表し删除图标、一般ゴミを選ぶ、点一下图标就可删除
。十字箭头発現します变换位置

5、編集は、最初は、Tagsあなたがこのアイコン、第二の入力ボックスは時にコードの参照に使用されるとき、検索したい名前を入力することができるということです名字。私はそのように命名花を作成しflower、その後、近くエディタは、ダウンロードを指していません。

6、その後、右下のをクリックしてGenerate Font F次のステップエディタ、ギアに赤い丸をクリックし、ページに入っています、
画像のキャプション

7.そこたら、次のように変更する必要があります。
画像のキャプション

8、Font Name導入されたフォントを導入する必要がある瞬間表して样式名称
Class Prefix設定されていない場合は、スタイル名に導入サフィックス、再分配スタイルの接頭辞をicon-flower

9、選択Support IE 8とGenerate preprocessor variables for： Lessし、Use a class

そして、導入されるボックスのCSSの必要性の裏に記入し类名、私が書いた.wyhiconの名前
をクリックして、エディタ近いそして10を、および右下角download下载フォント。

11、ダウンロードが完了した後、プレスソリューション。修正style.css内容

   /* 我们需将下面的url路径改为引用的fonts文件夹的路径，根据实际情况修改 */
   @font-face {
   font-family: 'wyhicon';
     src:  url('../fonts/wyhicon.eot?q06q0o');
     src:  url('../fonts/wyhicon.eot?q06q0o#iefix') format('embedded-opentype'),
         url('../fonts/wyhicon.ttf?q06q0o') format('truetype'),
         url('../fonts/wyhicon.woff?q06q0o') format('woff'),
         url('../fonts/wyhicon.svg?q06q0o#wyhicon') format('svg');
     ...
   }
   /* 下方这个类中的字体样式需要加上以下代码中的font-family */
   .wyhicon {
     font-family: 'wyhicon',PingFangSC-Light,'helvetica neue','hiragino sans gb',arial,'microsoft yahei ui','microsoft yahei',simsun,sans-serif !important;
     ...
   }
   .icon-flower:before {
      content: "\e900";
   }

すなわち、オリジナルstyle.css样式で.wyhiconフォントファミリの追加：
'wyhicon'、PingFangSC-ライト、 'ノイエヘルベチカ'、 'ヒラギノのSans
GB'、ゴシック、 'YaHeiマイクロソフトUI'、 '微軟雅黒'、simsun、sans-セリフ
重要！。

11、それにHTMLドキュメントで参照

<!-- 首先引用你的css样式 -->
<link rel="stylesheet" href="./css/style.css" type="text/css">
<!-- 然后引入你的字体文件就ok了 -->
<i class=" wyhicon icon-flower"></i>

おすすめ