首頁 > 文章 > web前端 > IconFont圖示引用的方法步驟（程式碼）

IconFont圖示引用的方法步驟（程式碼）

不言原創: 2018-09-13 17:40:1712540瀏覽

這篇文章帶給大家的內容是關於IconFont圖示引用的方法步驟（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

前端開發會常用到一些圖示。當ui妹子提供給你的圖示無法滿足你的需求時，可以在 iconfont.cn 上擷取並產生自己的業務圖示庫，再進行使用。

一、生成圖標庫代碼

首先，搜尋並找到你需要的圖標，將它採集到你的購物車裡，在購物車裡，你可以將選中的圖標添加到專案中（沒有的話，新建一個），後續產生

的資源/程式碼都是以專案為維度的。

IconFont圖示引用的方法步驟（程式碼）

來到剛才選取的專案頁，點擊『生成程式碼』的鏈接，會在下方產生不同引入方式的程式碼，下面會分別介紹。

IconFont圖示引用的方法步驟（程式碼）

二、引入

有三種引入方式供你選擇：SVG Symbol、Unicode 及 Font class。我們推薦在現代瀏覽器下使用 SVG Symbol 方式引進。

SVG Symbol

SVG 符號引入是現代瀏覽器未來主流的圖示引入方式。其方法是預先載入符號，在適當的地方引入並渲染為向量圖形。有以下特點：

支援多色圖標，不再受到單色圖標的限制
透過一些技巧，支援像字體那樣，透過font-size、color 來調整樣式
支援IE 9 及現代瀏覽器

使用步驟如下：

切換到Symbol 頁簽，複製專案產生的位址代碼：

//at.alicdn.com/t/font_835630_0rudypqb4a.js

加入圖示樣式程式碼，如果沒有特殊的要求，你可以直接重複使用Ant Design 圖示的樣式

.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -.125em;
}

#挑選對應圖示並取得類別名，套用至頁面

<svg>
    <use></use>
</svg>

你也可以透過使用Ant Design 圖標元件提供的Icon.createFromIconfontCN({...}) 方法來更方便地使用圖標，使用方式如下：

##配置專案地址，創建圖示元件

import { Icon } from 'antd';

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.js'
});

export default IconFont;

之後可以像使用元件一樣方便地使用，支援配置樣式

<iconfont></iconfont>

Unicode

這是最原始的方式，需要三個步驟來完成引入：

拷貝專案產生的字體庫程式碼，你可以新建一個樣式檔案來放置圖示相關的樣式。

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot');
  src: url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.woff') format('woff'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.svg#iconfont') format('svg');
}

加入圖示樣式程式碼，如果沒有特別的要求，你可以直接重複使用 Ant Design 圖示的樣式。

.iconfont {
  display: inline-block;
  font-style: normal;
  vertical-align: baseline;
  text-align: center;
  text-transform: none;
  line-height: 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &:before {
    display: block;
    font-family: "iconfont" !important;  /* 注意与 font-face 中的匹配 */
  }
}

在專案中滑鼠移動到要使用的圖示上，點擊『複製程式碼’，就得到了圖示對應的字體編碼，現在可以直接引入了：

<i></i>

Font Class

#切換到Font class 頁簽，在頁面頭部引入下面產生的css 程式碼：

//at.alicdn.com/t/font_835630_0rudypqb4a.css

如果不喜歡標籤引入的方式，也可以直接拷貝上面連結中的程式碼到你的樣式檔案。如果你不喜歡網站預設產生的類別名，自己重寫這部分程式碼即可，例如：

 - .icon-ali-pay:before { content: "\e66b"; }              // 修改前
 - .monitor-icon-alipay:before { content: "\e66b"; }       // 修改后

這時你可以選擇拷貝圖示對應程式碼（就是類別名，如果類別名稱被重寫過，這裡記得用修改後的），直接使用：

<i></i>

不過我們更推薦將它封裝一下：

import React from 'react';

const BizIcon = (props) => {
  const { type } = props;
  return <i></i>;
};
export default BizIcon;

現在可以更方便地使用：

<bizicon></bizicon>

Unicode 和Font Class 本質上就是字體，你可以透過一些字體的樣式屬性去控制這種圖示的展現，同時瀏覽器相容性很好，但不支援多色圖示。

IconFont圖示引用的方法步驟（程式碼）

一、生成圖標庫代碼

二、引入

SVG Symbol

相關文章