一次使用iconfont的记录

一次使用iconfont的记录

1. 进入网站 iconFont官网
   
2. 选择想要的icon (彩色或者单色) 加入购物车
   
3. 点开购物车, 选择添加到项目
   
4. 之后会跳转到项目,(或者点击 图标管理–我的项目)
   
5. 点击 查看在线链接
   
   
6. Unicode 用法 (方法源自官网) (不能显示彩色图标)
   第一步：拷贝项目下面生成的 @font-face

	@font-face { 	  font-family: 'iconfont'; 	 
	 src: url('iconfont.eot'); 	 
	  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
	      url('iconfont.woff2') format('woff2'),
	      url('iconfont.woff') format('woff'),
	      url('iconfont.ttf') format('truetype'),
	      url('iconfont.svg#iconfont') format('svg'); 	}

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

.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}

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

<span class="iconfont">&#xe62d;</span>

span的内容是是图标下面的

鼠标悬停icon上 复制Unicode 码

“iconfont” 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

7. font-class 使用 (不能显示彩色图标)
   
   第一步：引入项目下面生成的 fontclass 代码：

   <link rel="stylesheet" href="//at.alicdn.com/t/font_1442700_1ky1enqhgs9.css">
   

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

   <span class="iconfont iconbianpinghuatubiaosheji-1"></span>
   

   span的class名 鼠标悬停到icon上,直接复制代码
   有两个class名 iconfont 是必须的 , 复制代码的名字是 icon的名字
   

   " iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

8. Symbol 使用 (可以使用彩色图标) 使用的是SVG
   
   第一步：引入项目下面生成的 symbol 代码：

   <script src="//at.alicdn.com/t/font_1442700_1ky1enqhgs9.js"></script>
   

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

   <style>
   .icon {
     width: 1em;
     height: 1em;
     vertical-align: -0.15em;
     fill: currentColor;
     overflow: hidden;
   }
   </style>
   

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

   <svg class="icon" aria-hidden="true">
     <use xlink:href="#iconbianpinghuatubiaosheji-1"></use>
   </svg>
   

   复制代码是没有 # 号的, 要加上 # 号

9. Unicode Font-class Symbol 优缺点

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

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

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

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

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

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