這篇文章帶給大家的內容是關於IconFont圖示引用的方法步驟（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
前端開發會常用到一些圖示。當ui妹子提供給你的圖示無法滿足你的需求時，可以在 iconfont.cn 上擷取並產生自己的業務圖示庫，再進行使用。
首先，搜尋並找到你需要的圖標，將它採集到你的購物車裡，在購物車裡，你可以將選中的圖標添加到專案中（沒有的話，新建一個），後續產生
的資源/程式碼都是以專案為維度的。
來到剛才選取的專案頁，點擊『生成程式碼』的鏈接，會在下方產生不同引入方式的程式碼，下面會分別介紹。
有三種引入方式供你選擇：SVG Symbol、Unicode 及 Font class。我們推薦在現代瀏覽器下使用 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>
@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');
}.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>
//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>
iconfont-向量圖示字體的運用_html/css_WEB-ITnose
以上是IconFont圖示引用的方法步驟（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
