字体图标

字体图标下载

  • 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文件即可。

版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!

转载请注明:转载于37.2度云笔记

发表评论

您的电子邮箱地址不会被公开。

微信