字体图标

字体图标下载

• icomoon字库：icomoon.io
• 阿里iconfont字库：www.iconfont.cn

字体图标引入

1. 把下载包里面的fonts文件夹放入页面根目录下
2. 在css样式中全局声明字体（字体文件通过css引入页面中），注意路径！

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?tomleg');
  src:  url('fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?tomleg') format('truetype'),
    url('fonts/icomoon.woff?tomleg') format('woff'),
    url('fonts/icomoon.svg?tomleg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

3. 将字体图标放到span或者i标签中间，并书写样式：

span { font-family:'icomoon'; }

复制字体图标后面的正方形框即可引入。

<span>字体图标框</span>

字体图标追加

打开进入icomoon官网，点击右上角icomoon app。打开页面后点击左上角import icons追加字体图标，选择之前下载下来的压缩包内的selection.json文件，打开并点击yes。

追加生成后替换fonts文件即可。