添加阿里巴巴矢量圖標

增加阿里巴巴矢量圖

修改前綴

上述圖中重點就是前綴以及Font Family
其中：FontClass/Symbol 前綴：就是前綴+icon名，如下
權限圖標，就是scm-icon +quanxian=scm-iconquanxian
Font Family爲前class，如下權限按鈕使用就是<i class="scmFontFamiliy scm-iconquanxian"

下載

關鍵文件

iconfont.css

@font-face {font-family: "scmFontFamily";
  src: url('iconfont.eot?t=1574155673020'); /* IE9 */
  src: url('iconfont.eot?t=1574155673020#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQUAAsAAAAACGQAAAPGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDZIMtATYCJAMQCwoABCAFhSkHRRtYB8i+QDaGA60/AqJNxihZKdkhHdVjZ9Pa6/t5jwzx8N9+6X0zszQ/fwNYBtkTVZdqAkfsKqMqqwDA+OoKh5Z19f6vf/V35XqdJZF9kwdlTiazZiV8VVDRwJ1Y/tJFyYlrfrcm8N/r/1rXwuMKmmgUlf8sU3Q3mn0v7EWD84AzJdK0UGlDXIENuHRQGwTO4ES4GMt/G4fisy5A4P85Zrq0DTw/gC+jLRq42gcSfRUWLb53wngqsI2dytTHCVRrJXLYV93YCe4Ka1cgrisSBvecQmlJD32hW3NpEXcAF/10CzoCbod/H/9ID4Kkk1kHD16sskDpT+Cr8GLIoI8AmPPpIFxFxm6gEJdrDWc5xYHdnFQt1tki0Ld1ibnm8tUQyzqLoM/+yyNLguiyUsfAHgpmfuIyUmEgkyAUrBfIL6CPkOwpwGcs3Ixv6krShgE5MWBWTnpTy+03n3t6xqt79tjqGlTot6+qzcdug99q4JuLzod3AGp8VPnVh0uPdh4s3hfqzfP2Mbaiz2cxPoOJ/1SlqIeLblJj+XinLetqdd+v8+5nz4/LvV75z6fY/Jx8cvvz+3fz8+HTe717NZ5vn2XKoaoavEc0p73dJhOVh9127731+xcehl4+NPz/5a8qmqptbYXaBaKHLPYj30T7Fy2Lv/+9kpFNz4qcf8fspe55p3edpt7r1JuZyZP1io557r1Ei/60Bkqm49TE+nqTJmotLSfn5wnazCznNV3+KWtpPnfsEtWneYz0Nm746Lc/VQZ1BlY2BlVWVQY2OvKqIFAtQhDkeiz2SBcEi5O/wGs8hlKpACP5lwUYdVqEvb92k83v7lSd8iv8j1fr+fIL7SMF6M/8f5ga849k9qwrOttSlqJyXIbhLE76p/YlVBUjxjLlyxymWZDqQisyAUnPRshaO5AFuwgdjSXoau2HapeBqxvT1uEkygA7nTIQVnoGydAPyFb6hSj4QKFjLnRetw7rQHU8Wm7Z2BoDKsoI5sSCxqaQIlBTdGK4p00wqsPzq7Gh6FPtRLLrmJULM+d2E2ZTqInSklPrwjXEJGze1bZxKZ1zEYmMGoh/GtF1iqyMqkTgyTLn1vyUFJG+KFmgBnhawhAYR1ggY6YgCgFlEv1tnKcbBIbqvK4aFpYrdFPaERK70CrG+pRZa+hGRgkUfbFImmSpfZE1ArN/0T1TcZdxknQcJ0JEDIUEiesInY5CrPXrVISASyaP8FnlS7GbiX0FybchMr7/CFTWrUukyFGio3sRy3aa5l6yY3NScbluXrw5TUwJAAAA') format('woff2'),
  url('iconfont.woff?t=1574155673020') format('woff'),
  url('iconfont.ttf?t=1574155673020') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1574155673020#scmFontFamily') format('svg'); /* iOS 4.1- */
}

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

.scm-iconfahuo1:before {
  content: "\e6d5";
}

.scm-iconquanxian:before {
  content: "\e609";
}

.scm-iconxinzeng:before {
  content: "\e600";
}

使用

在main.js中導入上述iconfont.css文件

import '@/xx/xx/iconfont.css'

然後在需要的地方使用：

 <i class="scmFontFamily scm-iconfahuo1"></i>

本地引入

若遇到無法加載比如本系統集成到他人系統時，IE無法展示這個時候可以使用
url地址替換爲本地下載好的文件地址

@font-face {font-family: "scmFontFamily";
  src: url('./iconfont.eot'); /* IE9 */
  src: url('./iconfont.eot') format('embedded-opentype'), /* IE6-IE8 */
  url('./iconfont.woff2') format('woff2'),
  url('./iconfont.woff') format('woff'),
  url('./iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('./iconfont.svg') format('svg'); /* iOS 4.1- */
}

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

.scm-iconfahuo1:before {
  content: "\e6d5";
}

.scm-iconquanxian:before {
  content: "\e609";
}

.scm-iconxinzeng:before {
  content: "\e600";
}

鏈接引入

例如複製上訴地址

<style lang="scss">
	/*每個頁面公共css */
	@import url("//at.alicdn.com/t/font_1833058_m108alkt8n.css");
</style>

然後直接使用

記錄之~