你的位置:首页 > 网页设计

[网页设计]字体图标使用笔记


字体图标使用笔记:

 

优缺点:

首先,我们先恶补下什么是字体图标:用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。

优点:

  • 加载文件体积小
  • 统一展示风格,使用方法
  • 通过font-size,color就能自由变化大小,修改颜色,就像控制文字一样简单
  • 可以添加一些视觉效果如:阴影、旋转、透明度
  • 兼容IE6
  • 后期维护成本很低

缺点:

  • 制作门槛有点高,需要借助专业的工具生成字库文件
  • 需要服务器做些相应的配置来解决识别问题和跨域问题

 

 

两家相对比较权威的字体图标:阿里巴巴Iconfont 和 Font Awesome

字体图标的使用方法:

第一步:下载

    在官网下载即可。

 

 

第二步:引入

为了方便资源调用,尽量将.css 和字库文件放在一个文件夹下,不要随意拆开部署,防止无法正常加载字体文件。

Iconfont

  1. <link href="lib/iconfont/iconfont.css" rel="stylesheet" type="text/css"/>

 

Font Awesome

  1. <link href="lib/font-awesome/font-awesome.min.css" rel="stylesheet" type="text/css"/>
  2. <!--[if IE 7]>
  3. <link href="lib/font-awesome/font-awesome-ie7.min.css" rel="stylesheet" type="text/css"/>
  4. <![endif]-->

 

 

 

第三步:调用

有两种使用方法

 

 

 

方法1、挑选相应图标并获取字体编码(如果字库发生过更新,编码会发生相应的变化,需要重新获取对应编码),应用于页面。

  1. <i class="iconfont">&#xf0020;</i>

 

方法2、通过对应的css类名调用

  1. <i class="iconfont iconfont-yunshangchuan"></i>

 

 

 

 

字体图标的网站:

 

【01】官网 font awesome 

http://www.bootcss.com/p/font-awesome/

 

 


 

 

 

【02】阿里巴巴矢量图标

http://www.iconfont.cn/



 

 

 

1.1 平台简介



Iconfont.cn 是由阿里巴巴UX部门推出的矢量图标管理网站,也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新 中,Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时 iconfont.cn平台作为矢量图标倡导者,积极在线分享矢量图标制作经验、前端应用说明,及应用中常见的一些问题。

 

 

1.2 网页矢量图标在线生成工具



Iconfont.cn为解决设计师制作字体图标困难的问题,为用户提供了在线矢量格式转换的功能。设计师只要将设计好的图标上传至平台,平台将会将图标存储在平台上,并转换成多种格式文件。

http://iconfont.cn/help/iconuse.html

iconfont 使用方法。





 

 

 

 

代码示例:

 

以font-awesome 举例。

使用方法:
 
1.引入这个.css
  1. <link href="css/font-awesome.css" rel="stylesheet" type="text/css"/>

 
 

 
2.把font文件夹的内容放入项目中,与CSS文件夹,js文件夹同级。
 
3.使用网页首页的字体图标的类目即可。
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>测试</title>
  6. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  7. <link href="css/font-awesome.css" rel="stylesheet" type="text/css"/>
  8.  
  9.  
  10. <style>
  11.  
  12. </style>
  13. <script>
  14.  
  15. </script>
  16. </head>
  17. <body>
  18. <i class=" icon-external-link"></i>
  19. </body>
  20. </html>

 
效果:


 

 

 

 

 

 

 

 

 

 

 

 

 

 

**