1.附阿里图标库链接：http://www.iconfont.cn/

2.登录阿里图标库以后，搜索我们需要的图标，将其加入购物车，如图

3.将我们需要的图标全部挑选完毕以后，点击购物车图标

4.这时候右侧会出现一个预览窗口，显示我们前面加入购物车的那些图标，我们选择页面中的下载代码

5.查看一下我们的下载包里面都有什么文件

6.使用fontclass方式
其实在下载的文件里面demo_fontclass里面说的已经很详细了，我们在此基础上，再说明一下。

6.1font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。与unicode使用方式相比，具有如下特点：

  • 兼容性良好，支持ie8+，及所有现代浏览器。
  • 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
  • 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

6.2使用步骤如下：

第一步：引入项目下面生成的fontclass代码：

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

第二步：挑选相应图标并获取类名，应用于页面：

  1. <i class="iconfont icon-xxx"></i>

6.3使用fontclass

6.3.1将生成目录下面的iconfont.css复制一份放到我们的项目下面，我们可以看一下里面的代码

  1. @font-face {font-family: "iconfont";
  2.   src: url('iconfont.eot?t=1491962079836'); /* IE9*/
  3.   src: url('iconfont.eot?t=1491962079836#iefix') format('embedded-opentype'), /* IE6-IE8 */
  4.   url('iconfont.woff?t=1491962079836') format('woff'), /* chrome, firefox */
  5.   url('iconfont.ttf?t=1491962079836') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  6.   url('iconfont.svg?t=1491962079836#iconfont') format('svg'); /* iOS 4.1- */
  7. }
  8.  
  9. .iconfont {
  10.   font-family:"iconfont" !important;
  11.   font-size:16px;
  12.   font-style:normal;
  13.   -webkit-font-smoothing: antialiased;
  14.   -moz-osx-font-smoothing: grayscale;
  15. }
  16.  
  17. .icon-fanhuidingbu:before { content: "\e60f"; }
  18.  
  19. .icon-xinfeng:before { content: "\e600"; }

这个文件可以单独的放置可以直接放到我们自己的css文件里面。看代码，他还需要四个依赖文件，我们也复制过来。

6.3.2html文件中使用我们的图标

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="iconfont.css">
  6.     <title></title>
  7. </head>
  8. <body>
  9.     <div><i class="iconfont icon-xinfeng"></i>哈哈哈</div>
  10. </body>
  11. </html>

注意标签i元素的class类，具体的图标对应过去的类，可以在下载包里面的demo_fontclass里面找到。

7.使用unicode

注意查看下载目录里面的demo_unicode.html

7.1引用

unicode是字体在网页端最原始的应用方式，特点是：

  • 兼容性最好，支持ie6+，及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小，颜色等等。
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

7.2unicode使用步骤如下：

第一步：拷贝项目下面生成的font-face

  1. @font-face {
  2.   font-family: 'iconfont';
  3.   src: url('iconfont.eot');
  4.   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
  5.   url('iconfont.woff') format('woff'),
  6.   url('iconfont.ttf') format('truetype'),
  7.   url('iconfont.svg#iconfont') format('svg');
  8. }

第二步：定义使用iconfont的样式

  1. .iconfont{
  2.   font-family:"iconfont" !important;
  3.   font-size:16px;font-style:normal;
  4.   -webkit-font-smoothing: antialiased;
  5.   -webkit-text-stroke-width: 0.2px;
  6.   -moz-osx-font-smoothing: grayscale;
  7. }

第三步：挑选相应图标并获取字体编码，应用于页面

  1. <i class="iconfont">3</i>

7.3实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <style type="text/css" media="screen">
  6.         @font-face {font-family: "iconfont";
  7.           src: url('iconfont.eot?t=1491962079836'); /* IE9*/
  8.           src: url('iconfont.eot?t=1491962079836#iefix') format('embedded-opentype'), /* IE6-IE8 */
  9.           url('iconfont.woff?t=1491962079836') format('woff'), /* chrome, firefox */
  10.           url('iconfont.ttf?t=1491962079836') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  11.           url('iconfont.svg?t=1491962079836#iconfont') format('svg'); /* iOS 4.1- */
  12.         }
  13.         .iconfont{
  14.           font-family:"iconfont" !important;
  15.           font-size:16px;font-style:normal;
  16.           -webkit-font-smoothing: antialiased;
  17.           -webkit-text-stroke-width: 0.2px;
  18.           -moz-osx-font-smoothing: grayscale;
  19.         }
  20.     </style>
  21.     <title></title>
  22. </head>
  23. <body>
  24.     <div><i class="iconfont"></i>哈哈哈</div>
  25. </body>
  26. </html>

图标对应的Unicode编码，在demo_unicode.html文件里面查看。

8.symbol方法

详细在demo_symbol.html文件里面
8.1引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以百度，这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

  • 支持多色图标了，不再受单色限制。
  • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
  • 兼容性较差，支持 ie9+,及现代浏览器。
  • 浏览器渲染svg的性能一般，还不如png。

使用步骤如下：

第一步：引入项目下面生成的symbol代码：

  1. <script src="./iconfont.js"></script>

第二步：加入通用css代码（引入一次就行）：

  1. <style type="text/css">
  2. .icon {
  3.    width: 1em; height: 1em;
  4.    vertical-align: -0.15em;
  5.    fill: currentColor;
  6.    overflow: hidden;
  7. }
  8. </style>

第三步：挑选相应图标并获取类名，应用于页面：

  1. <svg class="icon" aria-hidden="true">
  2.   <use xlink:href="#icon-xxx"></use>
  3. </svg>
  4.

8.3实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script type="text/javascript" src="iconfont.js"></script>
  6.     <style type="text/css">
  7.         .icon {
  8.            width: 1em; height: 1em;
  9.            vertical-align: -0.15em;
  10.            fill: currentColor;
  11.            overflow: hidden;
  12.         }
  13.     </style>
  14.     <title></title>
  15. </head>
  16. <body>
  17.     <div>
  18.         <svg class="icon" aria-hidden="true">
  19.           <use xlink:href="#icon-xinfeng"></use>
  20.         </svg>
  21.         哈哈哈哈
  22.     </div>
  23. </body>
  24. </body>
  25. </html>

关于阿里图标库Iconfont生成图标的三种使用方式（fontclass/unicode/symbol）的更多相关文章

  1. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  2. 字体图标库 iconfont、iconmoon 的维护管理与使用探索

    字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里 ...

  3. [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont

    React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...

  4. [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题

    React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size,  line-height ,值为和 height 一样的高度. 例如: ...

  5. iconfont的三种使用方式

    这篇文章主要介绍了iconfont的三种使用方式,需要的朋友可以参考下   在我们项目中经常要使用到iconfont,在此我们使用阿里巴巴矢量库提供的icon图标,此图标库足够为我们提供大量的图标,我 ...

  6. php 生成word的三种方式

    原文地址 http://www.jb51.net/article/97253.htm 最近工作遇到关于生成word的问题 现在总结一下生成word的三种方法. btw:好像只要是标题带PHP的貌似点击 ...

  7. javascript生成对象的三种方法

    /** js生成对象的三种方法*/ // 1.通过new Object,然后添加属性 示例如下: var people1 = new Object(); people1.name = 'xiaohai ...

  8. php生成随机数的三种方法

    php生成随机数的三种方法 如何用php生成1-10之间的不重复随机数? 例1,使用shuffle函数生成随机数. <?php$arr=range(1,10);shuffle($arr);for ...

  9. PHP生成word的三种方式

    摘要: 最近工作遇到关于生成word的问题 现在总结一下生成word的三种方法. btw:好像在博客园发表博客只要是标题带PHP的貌似点击量都不是很高(哥哥我标题还是带上PHP了),不知道为什么,估计 ...

随机推荐

  1. 【转】Java中关于异常处理的十个最佳实践

    原文地址:http://www.searchsoa.com.cn/showcontent_71960.htm 导读:异常处理是书写强健Java应用的一个重要部分,Java许你创建新的异常,并通过使用 ...

  2. 【转】Mysql分页语句Limit用法

    http://qimo601.iteye.com/blog/1634748 FAQ: MYSQL limit,offset 区别 SELECT keyword FROM `keyword_rank` ...

  3. 业务逻辑 : 未完 : easybook.com

    Content>social media facebook, twitter, google+, instagram, pinterest (Question : How to update n ...

  4. 如何用一张图片代替 'input:file' 上传本地文件??

    今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的:  如何用一张图片代替 'input:file' 上传 ...

  5. Laravel路由

    Laravel安装,这里使用一键安装包. 使用PHP内置的Web服务器,在PHP文件夹下运行命令行 php -S 0.0.0.0:1024 一.设置路由 路由文件在app\HTTP\routes.ph ...

  6. 项目架构开发：数据访问层之Query

    接上文 项目架构开发:数据访问层之Repository 上一章我们讲了IRepository接口,这张我们来讲IQuery 根据字面意思就可以知道,这次主要讲数据查询,上一章我们只针对单表做了查询的操 ...

  7. Memcached 内存管理详解

    Memcached是一个高效的分布式内存cache,了解memcached的内存管理机制,便于我们理解memcached,让我们可以针对我们数据特点进行调优,让其更好的为我所用. 首先需要我们先了解两 ...

  8. vue移动端框架到底哪家强

    Weex 2016年4月21日,阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex开放内测邀请. Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能.可扩展的 nativ ...

  9. JavaScript的连续赋值的思考

    下面是一个连续赋值的例子: 在这里面,先创建a对象并添加n:1,然后将a对象赋值给b,这时候a和b引用同一个对象.最后我们要着重理解这最后一行代码 a.x = a = {n:2}; 按照我们平常的思维 ...

  10. .NET MD5加密解密代码

    MD5简介: 是让大容量信息在用数字签名软件签署私人密匙前被"压缩"成一种保密的格式(就是把一个任意长度的字节串变换成一定长的大整数).不管是MD2.MD4还是MD5,它们都需要获 ...