国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

IconFont圖標引用

cnTomato / 542人閱讀

摘要：前端開發會經常用到一些圖標。當妹子給你提供的圖標不能滿足你的需求時，可以在上采集并生成自己的業務圖標庫，再進行使用。符號引入是現代瀏覽器未來主流的圖標引入方式。加入圖標樣式代碼，如果沒有特殊的要求，你可以直接復用圖標的樣式。

前端開發會經常用到一些圖標。當ui妹子給你提供的圖標不能滿足你的需求時，可以在 iconfont.cn 上采集并生成自己的業務圖標庫，再進行使用。

一、生成圖標庫代碼

首先，搜索并找到你需要的圖標，將它采集到你的購物車里，在購物車里，你可以將選中的圖標添加到項目中（沒有的話，新建一個），后續生成

的資源/代碼都是以項目為維度的。

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

二、引入

有三種引入方式供你選擇：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;
}

挑選相應圖標并獲取類名，應用于頁面

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

配置項目地址，創建圖標組件

import { Icon } from "antd";

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

export default IconFont;

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

Unicode

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

拷貝項目生成的字體庫代碼，你可以新建一個樣式文件來放置圖標相關的樣式。

@font-face {
  font-family: "iconfont";
  src: url("http://at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot");
  src: url("http://at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.eot?#iefix") format("embedded-opentype"),
  url("http://at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.woff") format("woff"),
  url("http://at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.ttf") format("truetype"),
  url("http://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 中的匹配 */
  }
}

在項目中鼠標移動到要用的圖標上，點擊『復制代碼』，就得到了圖標對應的字體編碼，現在可以直接引入了：

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"; }       // 修改后

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

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

import React from "react";

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

現在可以更加方便地使用：

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97747.html

相關文章

  • iconfont的使用方法(更新了一些內容）

    摘要：方式和方式是極其相似的，只不過他們一個用的是圖標的字體編碼，一個用的是圖標的引用而已是使用了引用的類名，可在下載的中查看，或者可以在阿里矢量圖標庫的網站上，進入我的項目查看。 字體圖標iconfont阿里官網傳送門： http://www.iconfont.cn/打開首頁的小圖標好漂亮哦1）showImg(https://segmentfault.com/img/bVbghOc?w=1...

    tianlai 評論0 收藏0

  • Iconfont 在HTML中的使用

    摘要：與使用方式相比，具有如下特點兼容性良好，支持，及所有現代瀏覽器。相比于語意明確，書寫更直觀。不過因為本質上還是使用的字體，所以多色圖標還是不支持的。一、準備階段： 　　a.進入阿里巴巴矢量圖標庫www.iconfont.cn挑選所需的圖標，加入購物車 　　　 　　b.點擊網頁中的購物車下載代碼 　　 二、3種方法實現 Iconfont 的HTML顯示 Unicode 引用 Unicode...

    番茄西紅柿 評論0 收藏0

  • 像打字一樣插入圖標-iconfont

    摘要：簡介是什么就像名字一樣，就是圖標字體，像雅黑字體，思源字體一樣，這種字體就是由圖標構成有何優勢輕量性一個圖標字體比一系列的圖像特別是在屏中使用雙倍圖像要小。問題很小創作自已的字體圖標很費時間，重構人員后期維護的成本偏高。 簡介 - iconfont是什么？ 就像名字一樣，iconfont就是圖標字體，像雅黑字體，思源字體一樣，這種字體就是由圖標構成~ - 有何優勢？ 1、輕量性：一個圖...

    warkiz 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<