字体图标的使用方法

1.     使用阿里的iconfont

2.     步骤

①    打开官网

http://iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3

 

②    查找想要使用的字体图标

③    加入购物车

④    点击购物车，选中要使用的字体图标，下载代码

⑤    使用

Ⅰfont-class引用

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

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

o   兼容性良好，支持ie8+，及所有现代浏览器。

o   相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。

o   因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。

o   不过因为本质上还是使用的字体，所以多色图标还是不支持的。

 

 

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

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

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

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

 

Ⅱsymbol引用           

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。

 

o   支持多色图标了，不再受单色限制。

o   通过一些技巧，支持像字体那样，通过font-size,color来调整样式。

o   兼容性较差，支持 ie9+,及现代浏览器。

o   浏览器渲染svg的性能一般，还不如png。

 

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

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

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

<style type="text/css">

.icon {

    1em; height: 1em;

   vertical-align: -0.15em;

   fill: currentColor;

   overflow: hidden;

}

</style>

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

<svg class="icon" aria-hidden="true">

  <use xlink:href="#icon-xxx"></use>

</svg>

 

3.     还有第三种unicode方法，不过已经过时。