IconFont使用方式简介

一、在线引入方式

1.iconfont中选择需要的图标，加入购物车

图1

2.点击图1所示的购物车，弹出如图2所示的弹框。

依次点击 添加至项目---》选择需要添加的项目---》再点击确定,跳转到如图3所示的页面

图2

3.点击图3中 “unicode" "font class" "symbol"可以选择iconfont的引入方式。

图3

注：有些字体图标不能用symbol方式使用。

        点击图3所示的,"点击复制代码",ctrl+v，在浏览器中打开.js文件，即可查看，如果要使用的图标有对应的id，则可以用symbol方式使用，否则不可以用symbol方式。

图4

4.如图3所示，选择iconfont的引入方式后，点击”点此复制代码“，再ctrl+v粘贴到项目的全局样式文件中。

 其中 font class方式是.css文件----可以直接在浏览器中打开

symbol方式是.js文件------可以直接在浏览器中打开

5.全局引入iconfont.css样式文件

  如：vue项目一般在 main.js文件中引入

import "./assets/css/iconcss/iconfont.css";

6.使用iconfont：注使用方式和引入iconfont的方式要一致。

  1）unicode方式

     unicode使用图标,如：

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

   2）font class方式

    通过class使用图标,如：icon-24px；

<i class="iconfont icon-24px"></i>

  字符串模板 动态引入字体图标

<div class="icon-wrap">
     <i :class="`iconfont icon${item.icon}`"></i>
 </div>

3）symbol方式  

    通过symbol和use标签使用,如：

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

二、本地引入方式

 1. 步骤1-2和在线引入方式一致

 2.直接点击如图3所示的  ”下载至本地“ 按钮，下载文件。解压下载好的文件，存放在本地文件夹中。

    下载的字体图标文件一般包括以下几个文件，直接复制到项目下即可

3.使用方式和在线引入方式的步骤5、6一致。

4.本地引入，每次添加新图标时，都需要 重复步骤2，下载新的字体图标文件替换旧的字体图标文件（全部替换）

/*

希望对你有帮助！

如有错误，欢迎指正，谢谢！

*/