图标字体使用方法

一:图标字体特点

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

二.图标字体使用方法

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

 

 

 

 

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

 

 

如下。

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

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

颜色。如下。

 

 

 

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

 

 

 

 

转载于:https://www.cnblogs.com/ytu2010dt/p/5002501.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值