在自己的專案中使用阿里雲字型圖示

ShariseMo發表於2018-04-24
阿里

步驟

  • 製作svg格式的圖示，並上傳到阿里雲圖示庫
  • 將圖示加入到購物車
  • 將購物車中的圖示新增到專案
  • 生成專案的圖示連結，直接在專案中引用

圖例

  1. 上傳svg在自己的專案中使用阿里雲字型圖示
  2. 新增到購物車在自己的專案中使用阿里雲字型圖示
  3. 將購物車中的圖示新增到專案在自己的專案中使用阿里雲字型圖示

  4. 生成專案圖示連結在自己的專案中使用阿里雲字型圖示


  5. 引入+使用

//index.html 
<!DOCTYPE html><html><head>  <title>品氪CRM</title>  <meta charset="utf-8">  <!--<meta name="referrer" content="never">-->  <!--渲染標準-->  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  <link rel="stylesheet" href="./static/css/reset.css"></head><body>  <div id="app"></div>  <script src="https://at.alicdn.com/t/font_589280_op0vml6a51r79zfr.js"></script></body></html>

//index.css
.icon {  width: 1em; height: 1em;  vertical-align: -0.15em;  fill: currentColor;  overflow: hidden;}
//使用圖示的檔案
<svg class="icon" aria-hidden="true" style="font-size: 16px">    <use xlink:href="#icon-plus"></use></svg>複製程式碼

幾種不同的使用

有三種引用阿里圖示的方式：Unicode，Font class ， Symbol

symbol

  • 支援多色圖示了，不再受單色限制。
  • 通過一些技巧，支援像字型那樣，通過font-size,color來調整樣式。
  • 相容性較差，支援 ie9+,及現代瀏覽器。
  • 瀏覽器渲染svg的效能一般，還不如png
這裡的例子用的是symbol的使用方式，這種方式比較適合需要使用多色圖示的情況。例如選單menu，sidebar，或者懸浮變色，可以通過style樣式來控制圖示大小和顏色

使用步驟如下：第一步：拷貝專案下面生成的symbol程式碼：//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
第二步：加入通用css程式碼（引入一次就行）：<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>
第三步：挑選相應圖示並獲取類名，應用於頁面：<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>複製程式碼

Unicode

  • 相容性最好，支援ie6+，及所有現代瀏覽器。
  • 支援按字型的方式去動態調整圖示大小，顏色等等。
  • 但是因為是字型，所以不支援多色。只能使用平臺裡單色的圖示，就算專案裡有多色圖示也會自動去色。

注意：新版iconfont支援多色圖示，這些多色圖示在unicode模式下將不能使用，如果有需求建議使用symbol的引用方式

unicode使用步驟如下：第一步：拷貝專案下面生成的font-face@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}
第二步：定義使用iconfont的樣式.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
第三步：挑選相應圖示並獲取字型編碼，應用於頁面<i class="iconfont">&#x33;</i>複製程式碼

font-class

font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。

與unicode使用方式相比，具有如下特點：

  • 相容性良好，支援ie8+，及所有現代瀏覽器。
  • 相比於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什麼。
  • 因為使用class來定義圖示，所以當要替換圖示時，只需要修改class裡面的unicode引用。
  • 不過因為本質上還是使用的字型，所以多色圖示還是不支援的。

使用步驟如下：第一步：拷貝專案下面生成的fontclass程式碼：//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
第二步：挑選相應圖示並獲取類名，應用於頁面：<i class="iconfont icon-xxx"></i>複製程式碼



相關文章