在阿里向量圖的操作

1. 選擇需要的圖示新增至購物車

2. 將購物車中的圖示, 新增至專案

   新增至專案

3. 會自動跳轉到我的專案

   專案頁面

4. 在 更多操作 中選擇 編輯專案

   更多操作

5. 將 FontClass/Symbol 字首 編輯一下, 規範化, 並且不要和 element-ui 中的字首重名.

   FontFamily 可以隨意

   編輯專案

6. 選擇 編輯圖示, 將圖示的名稱規範化

   編輯單個圖示

7. 修改標籤名

   修改標籤名

8. 全部完成後, 點選 下載至本地 , 將專案中的圖示全部下載下來.
   

   下載專案至本地

9. 下載的檔案為一個zip的壓縮檔案, 加壓後可以看到如下內容:

   檔案內容

專案中的操作

1. 將檔案複製到專案的 assets/icon 目錄下

   複製圖示檔案 2.修改iconfont.css檔案

   [class^="el-icon-newfont"], [class*=" el-icon-newfont"] {
     font-family: "FontFamily" !important;
     font-size: 12px;
     font-style: normal;
     -webkit-font-smoothing: antialiased
    
   ;
     -moz-osx-font-smoothing: grayscale;
   }

   注意: 第二個class中有個空格,font-size可以調整圖示字型的大小

2. 
   ccccc

@font-face {font-family: "FontFamily";
  src: url('iconfont.eot?t=1548124350966'); /* IE9 */
  src: url('iconfont.eot?t=1548124350966#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARoAAsAAAAACJQAAAQZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEYIQMATYCJAMMCwgABCAFhQUHOhtuB1FUTapkPwrcPUXYFmGihNiEIf/wJvxbHjjj4b/9WPfNDOoNmog0yyTRiDcOGV/xGrZtKBuSl/Dvf26ohHqvb1gkiUif3P8zOTR0WiZlD42BvDTp7VWDQWHyNcrnuSZfEX47AKhepnVg0kAnOLCkCt8bnQ2HBYgbxm6iPIjLBBr1E0Q3B7NdJKMA6wJxo3Mpkkn5lZrOUC/Ulmws4psa9el92sRX/vv4bzbqSWoycNXOWV+NtH7VPH/IsdWD4/zodbwotG1kjIsoxGlpfF88LI6La3TMRH1jrSKksTJVBeCia9eu9I+XiFrAbBaZ4VLiVw1mCX598EsilVfXogHfiRDc3X176gbSsfOwEYA4wOmQWEFKeCpWtnA0fZwcYV3FPj5G4kRgFNnAOTqyZy0kLYwlgyGkGLuQlPIQODqCM3TgtrWMDZ6FOGVkAGzZk25HOngsTT4eHXwigJaMkIFFVaRQaS1V35EGTssMDVpCwe7TRgaUkUKdhy7F7eUVFOjOiXD5+PIiK1TITl5MDhbXUKATJ0fyAYeHklChbXM7NRhHgZYMtcWSJqPY5mUDHFdMKlpYSgbBTdxIcSMpb2EZjLawR08JAEVNG4A0W9fvXyQWxP/zKnH/f/8+N5bOxJqYwGTJiJ2dLi+fnQVIZ2EmJm73XIWIIUL4+Dgubm/fGfuDlS2DpgGm/vS0HqNy9PQU3KrSGvwp4ZMSsFIpeV0DgCfYcMIUxxkIktIgN8MzC3EbqaZ8AV7is13HX0MjcBylpsHh+Vf30ewvYJ41AAWj3UadNUTtludBqeLmQV8hKr+vL++zwrIHfU6xCD/fgWy7t0GfUFN8c1JNUUF9fDNSMxGtkEHfV30vQhcQINo4O58UDGGZYA5dEnE1pmiR9OD+n2uc65M9dmiXS8EEhZXapvWnm+Adt3MlF7VR7+HhM+LiAbYiRFDdF7+SA9GIEi4dN10uHJFNef1rPU4BP2/qprnaLkn9y0kEPztaVCD8LlxFDORiG2pFv5I9qnuVvMjrKRWQ7vTrb/WMLtJko54YSZ0BZI0GicJMo0aTVb1WsrdENBqz3N6ky01clAaMugsI3R5IWv1A1u1JFOaPGr0RqNUdfWi0G2MHNhmMx0aVACVCFezDwM3BdRiKUm6bvDeQbN26bpAfLSnI9IXvHDAIddcBIX7BgsoQHQzGmh8QzBuBgQyc/V0b6q9Dy3LB1981UKGKayB5TQEB57IHVRx87EjOhgCSEKQCsiugU7gcjJZJznZ4zIDEprNcbSDuqE+XBLUj8/UHKBCKQvnsoK6i1ooYmk7LoWs7JnTCNRDCACYQ0jYYYxGyWFzAK9cNsVlBKrQeeU9TFU5ibc3Krm37WevEMcBBOVLkKOpukUh3eOrOkVlMjUQAAAAA') format('woff2'),
  url('iconfont.woff?t=1548124350966') format('woff'),
  url('iconfont.ttf?t=1548124350966') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1548124350966#FontFamily') format('svg'); /* iOS 4.1- */
}

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

[class^="el-icon-newfont"], [class*=" el-icon-newfont"] {
  font-family: "FontFamily" !important;
  font-size: 12px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.el-icon-newfont-setting:before {
  content: "\e605";
}

.el-icon-newfont-unbind:before {
  content: "\e68a";
}


 

3. 在 main.js 中引入 iconfont.css 檔案

   import '@/assets/icon/iconfont.css'
   

   引入樣式檔案

4. 使用圖示

   用 icon 引用:

   <el-button type="primary"
       title="管理公眾號"
       icon="el-icon-newfont-setting" //圖示名
       size="mini"
       @click="manage(scope.row.appId)"
       circle/>
   

   用 class 引用:

   <el-button type="primary"
       title="管理公眾號"
       class="el-icon-newfont-setting" //圖示名
       size="mini"
       @click="manage(scope.row.appId)"
       circle/>
   

線上引入css

在 vue 專案中的 App.vue 檔案中新增這個引用(每次新增新圖示到 iconfont 中的購物車、專案之後更新這個連結即可）

用 less 樣式引入

</style>
<style lang="less" scoped>
@import url(//at.alicdn.com/t/font_1026187_okd0aeilrwg.css);
</style>

在 el-input 上使用圖示

<el-input
    placeholder="設定"
    suffix-icon="el-icon-newfont-setting"
    v-model="input2">
</el-input>

作者：詩歌poetry
參考：https://www.jianshu.com/p/1f1ca6f452b4
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。