码迷,mamicode.com
首页 > 其他好文 > 详细

图标字体使用方法

时间:2015-11-28 13:24:19      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:

一:图标字体特点

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

二.图标字体使用方法

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

 

 技术分享

 

 

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

 

 技术分享

如下。

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

技术分享

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

颜色。如下。

 

 

 技术分享

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

 

 技术分享

 技术分享

 

图标字体使用方法

标签:

原文地址:http://www.cnblogs.com/ytu2010dt/p/5002501.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!