iconfont—阿里图标的使用

阿里图标库为我们提供了许多丰富精美的图标， 可以通过代码引入的方式将图标库引入到我们的项目中，用来美化我们的界面。iconfont 的使用方式有以下几种：

方式一：font-class 在线引入

打开网址进入首页，输入我们想要的图标名称进行搜索：

选择自己喜欢的图标加入购物车：

把图标添加到我的项目中，点击生成的链接：

复制生成的 url 链接，在项目中引入：在样式配置文件（base.css）中引入 url

@import url(https://at.alicdn.com/t/font_3378667_8almgd1m3b.css?spm=a313x.7781069.1998910419.100&file=font_3378667_8almgd1m3b.css);

 

复制图标代码， 通过属性控制 class="iconfont icon-zhuye" 

<template>
<div id="app">
 <h2>阿里图标库的测试</h2>
 <li class="iconfont icon-zhuye"></li>
</div>
</template>

 

能够成功显示，则代表引入成功。需要注意的是，这种方式只能引入加载到项目中的图标，后续添加新的图标或者对图标进行的任何修改，都需要更新 url 链接来更新图标库。

方式二：本地加载

将以上 url 链接的网页内容复制粘贴到 css文件中，通过本地引入的方式进行加载

@font-face {
  font-family: "iconfont"; /* Project id 3378667 */
  src: url('//at.alicdn.com/t/font_3378667_mzmh78ddbcr.woff2?t=1651755937648') format('woff2'),
       url('//at.alicdn.com/t/font_3378667_mzmh78ddbcr.woff?t=1651755937648') format('woff'),
       url('//at.alicdn.com/t/font_3378667_mzmh78ddbcr.ttf?t=1651755937648') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shanchu:before {
  content: "\e600";
}

.icon-fenxiang-copy:before {
  content: "\e632";
}

.icon-bianjixiugai-copy:before {
  content: "\e634";
}

.icon-tubiao:before {
  content: "\e659";
}

.icon-zhuye:before {
  content: "\e606";
}

main.js

import './css/iconfont.css'

 这种方式仍然有效。