Iconfont的简单使用

iconfont开源矢量图标字体库

第一步：选择你需要的一个图标或者是多个，让后选择加入“购物车”。

第二步：点击右上角的“购物车”图标之后，这里会弹出一个包含你所有选中的图片。之后你有三种选择：添加至项目，下载素材，下载代码。这里我们选择  添加至项目。

说明一下：下载素材就是可以下载该icon的svg,png,ai等格式。下载代码就是将icon对应完整的实现代码以及使用案例下载下来

第三步：点击添加项目之后就可以了，会自动跳转到你的项目里面去。（如果新加入icon则如下图。需要你刷新来跟新代码）

1：选择使用unicode方式：

他unicode模式下的代码复制自己的css文件中之后：注意给前面加上 "http:"不然有问题。

然后就可以在自己的类中添中： font-family: "iconfont" !important:

 

 

@font-face {
  font-family: 'iconfont';  /* project id 808917 */
  src: url('http://at.alicdn.com/t/font_808917_qreydq5rbd.eot');
  src: url('http://at.alicdn.com/t/font_808917_qreydq5rbd.eot?#iefix') format('embedded-opentype'),
  url('http://at.alicdn.com/t/font_808917_qreydq5rbd.woff') format('woff'),
  url('http://at.alicdn.com/t/font_808917_qreydq5rbd.ttf') format('truetype'),
  url('http://at.alicdn.com/t/font_808917_qreydq5rbd.svg#iconfont') format('svg');
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 

font-family:"iconfont"!important:

在html中使用选择对应的unicode就可以了

<i class="iconfont">&#xe619;</i>

2：选择font class方式

将font calss下面的路径复制自己的需要的页面head部分：如：注意给前面加上 "http:"不然有问题。

<link rel="stylesheet" href="http://at.alicdn.com/t/font_808917_rais7893e6p.css">

然后再页面中加入 ：类名 iconfont 以及图标对应的类名

<i  class=" iconfont icon-wendu"></i>

3：选择symbol方式

将fsymbol下面的路径复制自己的需要的页面head部分：如：注意给前面加上 "http:"不然有问题。以及引入通用css代码（引入一次就行）：（这种方式在以后是比较好用的，虽然个人喜欢用第一中方式）

<script src="http://at.alicdn.com/t/font_809148_a38rdozsusq.js"></script>
<style type="text/css">
        .icon {
           width: 1em; height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }
</style>

然后选择对应名字引入到自己的页面

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

 

最后：需要注意的是这些都是通过font-family来实现的，所以不支持图片颜色，只能为单一颜色，而且可以通过font-size来改变其大小。

学习借鉴：http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

时间：2018/08/27/19:42:10