CSS样式字体图标

下载网址:
推荐网站: http://icomoon.io
阿里icon font字库 http://www.iconfont.cn/
Fontello http://fontello.com/

进入网址下载成功后,在HTML页面声明CSS样式用于显示字体图标,
CSS声明如下:
第一步:在样式里面声明字体: 告诉别人我们自己定义的字体

@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?7kkyc2’);
src: url(‘fonts/icomoon.eot?7kkyc2#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?7kkyc2’) format(‘truetype’),
url(‘fonts/icomoon.woff?7kkyc2’) format(‘woff’),
url(‘fonts/icomoon.svg?7kkyc2#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
第二步:给盒子使用字体

span {
font-family: “icomoon”;
}
第三步:盒子里面添加结构

span::before {
content: “\e900”;
}
或者  
(span标签内放的是下载好的字体图标右侧的标志)  
(追加新图标到原来库里面
如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标,但是原来的不能删除,继续使用,此时我们需要这样做
把压缩包里面的selection.json 从新上传,然后,选中自己想要新的图标,从新下载压缩包,替换原来文件即可。

下载兼容字体包
刚才上传完毕, 网站会给我们把UI做的svg图片转换为我们的字体格式, 然后下载下来就好了
当然,我们不需要自己专门的图标,是想网上找几个图标使用,以上2步可以直接省略了, 直接到刚才的网站上找喜欢的下载使用吧。

字体引入到HTML
得到压缩包之后,最后一步,是最重要的一步了, 就是字体文件已经有了,我们需要引入到我们页面中。
1.首先把 以下4个文件放入到 fonts文件夹里面。 通俗的做法

猜你喜欢

转载自blog.csdn.net/qq_43021088/article/details/82215532