1、使用线上的阿里iconfont图标库
打开iconFont官网选择喜欢的图标，添加购物车
2 .单击购物车添加到项目
3生成链接
4请记住，在我们的vue项目中，找到index.html文件，引入css样式，并将您的链接放在这里
例如，link rel=' style sheet ' href=' http://at.Ali cdn.com/t/font _ 657604 _ xujhsb 9z lug 3z 0k9. CSS '
5然后，图标将可用于任何组件。 这里使用上面生成的三个图标中的一个。
例如，iclass=' iconiconfonticon-wode '/I
2、但是考虑网络及用户体验 阿里iconfont下载本地使用
1阿里iconfont图标直接本地下载
2在要存储字体图标的本地文件src/assets文件下创建iconfont文件夹
把这些文件放在文件夹里
3 .如果项目中没有下载css-loader相关的软件包，请将其下载。 如果未下载，npm install css-loader -D将报告错误
4当然，它可以位于其他文件夹下，但请注意，必须将src在iconfont.css的@font-face中引入的字体路径更改为本地路径。 当前，缺省值为绝对路径iconfont.css文件中的路径更改
在main.js中引入iconfont.CSS文件，如import ' XXX/XXX/XXX/icon font.CSS '
6直接使用
templatedivstyle=' background-color : cadetblue； 颜色： # 333； padding :30 px ' pi class=' icon font ' # xe 633；/I unicode/ppiclass=' iconfonticon-fanhuidingbu '/ifontclass/p style=' font-size 33602 em；' SVG class=' icon ' aria-hidden=' true ' use xlink : href=' # icon-fanhuidingbu '/use/SVG symbol/p/div/tem pliv exportdefault{data{}{return{}； }；/scriptstylescoped * { font-size 336024 px； } /*以下样式单独写，*/@ font-face {/* unicode */font-family 3360 ' icon font '； src : URL ((./assets/icon font/icon font.eot )； src : URL (' ./assets/icon font/icon font.eot？ # ie fix ' (format (embedded-opentype )、URL ) ./assets/icon font/icon font.wo fff2)、uuofF2) ) ) ) )。 URL (./assets/icon font/icon font.TTF ) )、URL ) ./assets/icon font/icon font.SVG # }.icon font { font } 导入； font-size: 1em； 字体样式： normal； WebKit-font-smoothing :安定力； - moz-OS x-font-smoothing : gray scale； } .icon { width: 2em； height: 2em； vertical-align: -0.15em； 文件：当前颜色； overflow :隐藏； (} /style 3、使用vue-awesome
1 .首先安装vue-awesome依赖软件包
NPMinstallvue-awesome2.main.js文件下的github显示，如果考虑项目大小，则只导入用于减小软件包大小的图标
不考虑导入‘vue-awesome/icons/flag’或大小
直接使用icon name=”beer”/icon
4、使用IconMoon
我喜欢可以在iconMoon上生成自己的矢量图
1 .想直接使用它们持有的官方图标时
选择我们想要的图标后，单击右下角的Generate Font F
此处显示已选择的图标，请在此处更改名称等，然后单击右下角的下载
2然后在vue项目中创建一个文件夹，打开style.css样式，并修改引入字体的路径。 (路径不同写法也不同，需要注意。 ）
在main.js上全球部署
import‘@/assets/CSS/ico moon/style.CSS’
如果我们想使用自己绘制的. svg格式的矢量图标，请单击Import Icons
导入本公司本地的. svg格式图标。 (矢量图由矢量图绘制，png、jpg等使用像素，不能直接从png转换为svg格式。 不那样做的话就做不好。 ) ) ) ) ) ) )。
导入后，以下步骤与上面的步骤相同。
4直接使用
参考： https://www.jqhtml.com/45617.html