2021-04-01

网页制作字体图标的使用和下载

1.字体图标的下载

1）icomoon字库
网址：http://icomoon.io
字库内容多，国外服务器，打开网速较慢。
2）阿里iconfont字库
网址：http://www.iconfont.cn
国内网站

2.字体图标的引入

1）把下载包里的fonts文件夹放入页面根目录下
2)在CSS样式中全局声明字体。
在下载的style.css文件中。

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

<span>  </span>

字体复制过来即可。

3.字体图标的追加

在后序工作中，若字体图标不够后，我们需要添加新的字体到文件中。
把压缩包里面的selection.json重新上传，然后选中自己想要的图标，重新下载压缩包，并替换原来的文件即可。