VUE开发--阿里图标(六十五)

一、图标下载

1. 下载
   网址：https://www.iconfont.cn/
   
   

   添加购物车

下载图标

2. 解压下载文件

   
   
   

   解压文件

二、使用方法

1. Unicode 引用
   Unicode 是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

拷贝字体文件

注意：必须使用内部样式

2. font-class 引用
   新建style目录，拷贝样式文件iconfont.css到目录，并修改字体文件路径。

@font-face {font-family: "iconfont";
  src: url('../fonts/iconfont.eot?t=1567544488860'); /* IE9 */
  src: url('../fonts/iconfont.eot?t=1567544488860#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMIAAsAAAAABsgAAAK6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBTIE/ATYCJAMICwYABCAFhG0HOBvtBRHVk2FkXx7wZKj5ywEjoVYDNmpm6+x08vN1fOGA8NUE93PwfO73eW6SJQAFEoksAHXm2xLYOiDVqir2KFe/ranKGROwIKFALxhU5PAulLGkz+fnyeoCEPYKSBsgAA5063LRFv/GzkHxj/GswXWm8EywAQeWSiwbDoDbAeAT907/aHkg8513Oa69+VMXYBxIAe2NUSABF0joDWM3ETzA+xDAmXCppLCrbGSGASwTQCbtSB+zQhyDcUqOCPYNew1yih2Oak99Apzw78tfbY6gsNOAjlouGuTp72CFXrVCJyVIgGActgM0kAoMSGNjvhqGiMPXOOdHRONYrQJ/zzp1Ike1Ic5fB5pdAQjV5c+kwMpHlVYAGBgOmaBy0tuD9g70Xmlsvr9JTWr10cGTAO3f8qRb+u97bO/dQq0+i+u7FwkDD0b02vPWO9B7Sf3Xom0BAzfYd8Vv8fLWfuz5xzlx8wrxclXq7S7+eDyHT4+MDQdyvLKFnO3S0qzBVsgcrL8Uvx3L/7D3V44DEmEMuQCAdQ2NvX/zN9Sdu16qR+at49IA8DVvy6PWDcOCgOM5AwL/TjGwy8Qq4FAmVDSWFZn0PWmdYQosIOzt11Sz342WBUf8bjfoQFgGjSOxpGGnwg4XMmCPIzlwJkXJYRd8zMMQMU5Asi0NgqcXULjzChpPn0nD/gk7/P2HPZ5pONNc+JzpQnyiXSh0Vrrh5QftNUVGLl2I1mcyH/4seRUXvJP0NoVNWZdLW4okS2zoP02rysiSAnbaY+R9wizpQVct76p5U1Xc9KLymgIsQKGz0g0vP2ivKTLtr4vK55/JfPizdDBGsu8kvR0dm7IeQG71cRDjUZ7pP02rysiSAnbaLPI+YW6e9aCrlvcJ2bypYC8eqi+3N4a/OwDAAoBlUMDOIWBSNJEw72ZjPxYAAAA=') format('woff2'),
  url('../fonts/iconfont.woff?t=1567544488860') format('woff'),
  url('../fonts/iconfont.ttf?t=1567544488860') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('../fonts/iconfont.svg?t=1567544488860#iconfont') format('svg'); /* iOS 4.1- */
}

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

.icon-gongnengdingyi:before {
  content: "\ebb7";
}

页面文件：

注意：
引入样式无件

@import "./style/iconfont.css";

3. Symbol 引用
   这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
• 兼容性较差，支持 IE9+，及现代浏览器。
• 浏览器渲染 SVG 的性能一般，还不如 png。

在public中创建文件，拷贝iconfont.js到目录:

拷贝iconfont.js

在index.html文件引入：

页面文件：

测试结果

二、在线使用

1. 将项目添加至项目

   
   
   

   将项目添加至项目

复制代码

2. font-class 引用

1. 引入样式
   当前组件：

2. 模板加入：

3. 结果预览

   
   
   

   结果预览

2. Symbol 引用
   index.html引入js：

图标使用：

复制代码

结果显示

注：如果是彩色图标请使用此方式。