vue引入iconfont字体图标的四种方式

一、登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中

http://www.iconfont.cn/home/index

二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式）

进入项目以后会看到阿里云可以选择三种方式进行导入图标

1、Unicode

 

Unicode的主要的特点

优势

• 兼容性最好，支持ie6+
• 支持按字体的方式去动态调整图标大小，颜色等等

劣势

• 不支持多色图标
• 在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难

使用方法：
第一步：在自定义的全局样式表中引入自定义字体 `font-face，并定义使用iconfont的样式

@font-face {
    font-family: "iconfont";
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome, firefox */
    url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  }
  .iconfont {
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }

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

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

2、Font class

Font class具有如下特点：

• 兼容性良好，支持ie8+
• 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。

1、进入项目以后选择 Font class 并下载到本地

 下载到本地，解压以后的文件夹列表如下：

2、把下载的文件粘贴到自己的项目中，记得放在 static（或assects目录）文件目录下，因为字体图标也属于静态资源的一部分。

3、在main.js文件内全局引入阿里云字体图标 css，记得使用路径要正确，如果此时编译不正确，说明引用路径存在问题

为避免出现图标方框的情况，请对font进行初始化

 在全局样式表中加入如下代码

// 阿里字体图标设置
.icon, .iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

4、项目中使用字体图标，就可以使用了

 3、Symbol  SVG图片格式

 

• 支持多色图标了，不再受单色限制。
• 支持像字体那样通过font-size,color来调整样式。
• 支持 ie9+
• 可利用CSS实现动画。
• 减少HTTP请求。
• 矢量，缩放不失真
• 可以很精细的控制SVG图标的每一部分

使用方法：
拷贝下载项目，复制inconfont.js到资源文件目录下，并引入inonfont.js文件

 在 index.html 中引入 iconfont.js 和 通用样式（引入一次就行）

<script src="/static/Iconfont/iconfont.js"></script>
<style>
    .icon {
      width: 1.5em;
      height: 1.5em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
      cursor: pointer;
      margin-right: 1rem;
    }
</style>

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

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

4、在线引入iconfont

1、生成icon的在线css链接

2、在Vue项目中，引用在线css链接和新建css样式文件 （重点）

2.1 在Vue项目中创建iconfont.css文件，当然名字自定义。

[class^="icon-all"], [class*="icon-all"]
{
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

这里的 icon-all 是我自己起的icon前缀名。

2.2 引用阿里项目在线的css链接

在index.html里面引用的。放在前面

2.3 引用自己创建的css文件

 

2.4 接着就可以在项目中使用你的icon啦~~~~