图标字体使用方法

xiaoxiao2021-02-27  413

一:图标字体特点

兼容性好(从IE4 开始支持)。一定程度会替代精灵图。只能是纯色不能加渐变,简约。本身是一个字,修改方便。(用font和color属性可以直接修改)。加在速度快。也可自己制作。

二.图标字体使用方法

1.上阿里巴巴字体库下载需要的图标加入购物车一键下载。下载完文件夹中有以下几个文件。把黄色区域中的四个文件拷贝到站点目录下的font(自己建立)文件夹下。(四个文件夹为了兼容不同浏览器)

 

 

 

 

2.打开demo.html拷贝以下一段话到html文件中

 

 

如下。

其中“iconfont”为字体名称可以自己修改,另外 文件路径需要修改。

3在需要调用文字图标的地方声明字体格式,也可调整字体大小来调整字体格式,也可改变

颜色。如下。

 

 

 

4.打开demo.html 拷贝如下黄色区域中的编码到相应需要使用图片的区域。此时就会显示相应的图标。

 

 

 

 

转载请注明原文地址: https://www.6miu.com/read-1653.html

最新回复(0)