Web 前端向量小圖示的使用方法

湯清麗發表於2019-12-29
Web前端

在寫前端頁面時，我們經常會用到一些小圖示之類的圖片，如果使用圖片的話程式碼寫起來比較麻煩，最近發現一個方便實用的方法，直接引用就可以了。

首先我們輸入網址：https://www.iconfont.cn/
可以百度搜尋：阿里巴巴向量圖，就會出來這個網址

以下我推薦兩種比較常用也是比較方便的方法。

方法1：font-class引用

  • 相容性良好，支援ie8+，及所有現代瀏覽器。
  • 因為使用class來定義圖示，所以當要替換圖示時，只需要修改class裡面的圖片名稱引用。
  • 不過因為本質上還是使用的字型，所以多色圖示還是不支援的。

第一步： 進入網站我們可以看到一個搜尋框，直接輸入你想要的圖示名稱，也可以在圖示庫找。

第二步：然後加入購物車.

第三步：點選購物車建立一個新專案，確定，如果同一個專案後面要追加圖片就不需要再重新建立了.

第四步：接下來就會出現以下這個頁面，複製程式碼，引用到程式碼的文件。

<link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">

第五步：引入程式碼切記加上“ http: ”

第六步：挑選相應圖示並獲取類名複製貼上，使用 class\="iconfont 後面複製圖片名稱，應用於頁面即可實現效果。

<body>
<i  class\="iconfont  icon-xxx"></i>
</body>

方法2: symbol引用

  • 是一種全新的使用方式，也是目前推薦的用法。網站也有相關介紹可以參考，與上面方法1相比具有如下特點：
  • 支援多色圖示了，不再受單色限制。
  • 通過一些技巧，支援像字型那樣，通過font-size,color來調整樣式。
  • 相容性較差，支援 ie9+,及現代瀏覽器。
  • 瀏覽器渲染svg的效能一般，還不如png。

第一步：一個專案如果要用到多個圖示，也可以把要用的圖示一起選好加入到購物車，再點選更新程式碼，再更新程式碼引用連線，這個方法需要下載到本地。

第二步：下載好後可以看到資料夾裡面到一些檔案，在內碼表面引入js檔案。

 <link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
    <script src="iconfont.js"></script>

第三步：把檔案包放在專案到同一個目錄下，這樣引用到圖示才能生效.

第四步：同樣到方法，我們在需要引用到圖示下方複製貼上圖片名稱在svg裡，更換 href="更換名稱".

  <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-079aiqing"></use>
        </svg>

第五步：在內碼表面我們需要引入以上兩個檔案地址以外，還需要引入一段style程式碼。

<style>
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

以下是全部程式碼作為參考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>阿里巴巴向量圖</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
    <script src="iconfont.js"></script>
</head>
<style>
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

<body>
    <input type="text" placeholder="搜尋">
    <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-079aiqing"></use>
        </svg>
</body>
</html>

程式碼效果：

總結：

第一種方法，直接引入就可以用，快捷方便，不需要下載，使用起來比較方便，缺點只能單一使用，不支援顏色。
第二種方法，支援多色，以及多個圖片引入效果也會比較好，缺點需要下載到本地檔案包，並且一定要放在同一個目錄下才能使用。
總體來說阿里巴巴向量圖對前端開發者還是非常有幫助，而且還是免費使用，以上方法大家可以根據自己到需求使用。


作者：湯清麗

日期：2019-12-29

微信：lenat666

相關文章