html5如何引用IconFont圖標(biāo)

這篇文章主要介紹了html5如何引用IconFont圖標(biāo)，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司，為您提供成都網(wǎng)站建設(shè)公司、成都網(wǎng)站制作、網(wǎng)站營銷推廣、網(wǎng)站開發(fā)設(shè)計(jì)，對服務(wù)混凝土泵車等多個行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報價服務(wù),我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！

前端開發(fā)會經(jīng)常用到一些圖標(biāo)。當(dāng)ui妹子給你提供的圖標(biāo)不能滿足你的需求時，可以在 iconfont.cn 上采集并生成自己的業(yè)務(wù)圖標(biāo)庫，再進(jìn)行使用。

一、生成圖標(biāo)庫代碼

首先，搜索并找到你需要的圖標(biāo)，將它采集到你的購物車?yán)?，在購物車?yán)?，你可以將選中的圖標(biāo)添加到項(xiàng)目中（沒有的話，新建一個），后續(xù)生成

的資源/代碼都是以項(xiàng)目為維度的。

來到剛才選中的項(xiàng)目頁，點(diǎn)擊『生成代碼』的鏈接，會在下方生成不同引入方式的代碼，下面會分別介紹。

二、引入

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

SVG Symbol

SVG 符號引入是現(xiàn)代瀏覽器未來主流的圖標(biāo)引入方式。其方法是預(yù)先加載符號，在合適的地方引入并渲染為矢量圖形。有如下特點(diǎn)：

1. 支持多色圖標(biāo)，不再受到單色圖標(biāo)的限制

2. 通過一些技巧，支持像字體那樣，通過 font-size、color 來調(diào)整樣式

3. 支持IE 9+ 及現(xiàn)代瀏覽器

使用步驟如下：

• 切換到 Symbol 頁簽，復(fù)制項(xiàng)目生成的地址代碼：

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

• 加入圖標(biāo)樣式代碼，如果沒有特殊的要求，你可以直接復(fù)用 Ant Design 圖標(biāo)的樣式

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

• 挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁面

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

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

• 配置項(xiàng)目地址，創(chuàng)建圖標(biāo)組件

import { Icon } from 'antd';

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

export default IconFont;

• 之后可以像使用 <Icon /> 組件一樣方便地使用，支持配置樣式

<IconFont type="icon-ali-pay" style={{ fontSize: '16px', color: 'lightblue' }} />

Unicode

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

• 拷貝項(xiàng)目生成的字體庫代碼，你可以新建一個樣式文件來放置圖標(biāo)相關(guān)的樣式。

@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');
}

• 加入圖標(biāo)樣式代碼，如果沒有特殊的要求，你可以直接復(fù)用 Ant Design 圖標(biāo)的樣式。

.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 中的匹配 */
  }
}

• 在項(xiàng)目中鼠標(biāo)移動到要用的圖標(biāo)上，點(diǎn)擊『復(fù)制代碼』，就得到了圖標(biāo)對應(yīng)的字體編碼，現(xiàn)在可以直接引入了：

<i class="iconfont">&#xe66b;</i>

Font Class

• 切換到 Font class 頁簽，在頁面頭部引入下面生成的 css 代碼：

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

如果不喜歡標(biāo)簽引入的方式，也可以直接拷貝上面鏈接中的代碼到你的樣式文件中。如果不喜歡網(wǎng)站默認(rèn)生成的類名，自己重寫這部分代碼即可，比如：

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

• 這時你可以選擇拷貝圖標(biāo)對應(yīng)代碼（就是類名，如果類名被重寫過，這里記得用修改后的），直接使用：

<i class="iconfont icon-ali-pay"></i>

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

import React from 'react';

const BizIcon = (props) => {
  const { type } = props;
  return <i className={`iconfont icon-${type}`} />;
};
export default BizIcon;

現(xiàn)在可以更加方便地使用：

<BizIcon type="ali-pay" />

Unicode 和 Font Class 本質(zhì)上就是字體，你可以通過一些字體的樣式屬性去控制這種圖標(biāo)的展現(xiàn)，同時瀏覽器兼容性很好，但不支持多色圖標(biāo)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享html5如何引用IconFont圖標(biāo)內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!

網(wǎng)頁標(biāo)題：html5如何引用IconFont圖標(biāo)
網(wǎng)頁鏈接：http://muchs.cn/article10/ipjcdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、微信公眾號、定制開發(fā)、做網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)