字体图标使用笔记
字体图标使用笔记:
优缺点:
首先,我们先恶补下什么是字体图标:用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。
优点:
- 加载文件体积小
- 统一展示风格,使用方法
- 通过font-size,color就能自由变化大小,修改颜色,就像控制文字一样简单
- 可以添加一些视觉效果如:阴影、旋转、透明度
- 兼容IE6
- 后期维护成本很低
缺点:
- 制作门槛有点高,需要借助专业的工具生成字库文件
- 需要服务器做些相应的配置来解决识别问题和跨域问题
两家相对比较权威的字体图标:阿里巴巴Iconfont 和 Font Awesome
字体图标的使用方法:
第一步:下载
第二步:引入
为了方便资源调用,尽量将.css 和字库文件放在一个文件夹下,不要随意拆开部署,防止无法正常加载字体文件。
Iconfont
<link href="lib/iconfont/iconfont.css" rel="stylesheet" type="text/css"/>
Font Awesome
<link href="lib/font-awesome/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<!--[if IE 7]>
<link href="lib/font-awesome/font-awesome-ie7.min.css" rel="stylesheet" type="text/css"/>
<![endif]-->
第三步:调用
有两种使用方法
方法1、挑选相应图标并获取字体编码(如果字库发生过更新,编码会发生相应的变化,需要重新获取对应编码),应用于页面。
<i class="iconfont">󰀠</i>
方法2、通过对应的css类名调用
<i class="iconfont iconfont-yunshangchuan"></i>
字体图标的网站:
【01】官网 font awesome
http://www.bootcss.com/p/font-awesome/
![](https://images2015.cnblogs.com/blog/715962/201601/715962-20160122100517078-71288553.jpg)
【02】阿里巴巴矢量图标
![](https://images2015.cnblogs.com/blog/715962/201601/715962-20160122100517422-1250915957.png)
1.1 平台简介
Iconfont.cn 是由阿里巴巴UX部门推出的矢量图标管理网站,也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新 中,Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时 iconfont.cn平台作为矢量图标倡导者,积极在线分享矢量图标制作经验、前端应用说明,及应用中常见的一些问题。
1.2 网页矢量图标在线生成工具
Iconfont.cn为解决设计师制作字体图标困难的问题,为用户提供了在线矢量格式转换的功能。设计师只要将设计好的图标上传至平台,平台将会将图标存储在平台上,并转换成多种格式文件。
http://iconfont.cn/help/iconuse.html
iconfont 使用方法。
代码示例:
以font-awesome 举例。
<link href="css/font-awesome.css" rel="stylesheet" type="text/css"/>
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<link href="css/font-awesome.css" rel="stylesheet" type="text/css"/>
<style>
</style>
<script>
</script>
</head>
<body>
<i class=" icon-external-link"></i>
</body>
</html>
![](https://images2015.cnblogs.com/blog/715962/201601/715962-20160122100517750-30997059.png)
**