字體圖標使用筆記

時間 2019-12-07

標籤字體圖標使用筆記简体版

原文原文鏈接

字體圖標使用筆記：css

優缺點：

首先，咱們先惡補下什麼是字體圖標：用字體文件取代圖片文件，來展現圖標、特殊字體等元素的方法。html

優勢：前端

 
  加載文件體積小
統一展現風格，使用方法
經過font-size，color就能自由變化大小，修改顏色，就像控制文字同樣簡單
能夠添加一些視覺效果如：陰影、旋轉、透明度
兼容IE6
後期維護成本很低
 
 

缺點：jquery

 
  製做門檻有點高，須要藉助專業的工具生成字庫文件
須要服務器作些相應的配置來解決識別問題和跨域問題

兩家相對比較權威的字體圖標：阿里巴巴Iconfont 和 Font Awesome跨域

字體圖標的使用方法：

第一步：下載服務器

在官網下載便可。

第二步：引入工具

爲了方便資源調用，儘可能將.css 和字庫文件放在一個文件夾下，不要隨意拆開部署，防止沒法正常加載字體文件。測試

Iconfont字體

<link href="lib/iconfont/iconfont.css" rel="stylesheet" type="text/css"/>

Font Awesome網站

<link href="lib/font-awesome/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<!--[if IE 7]>
<link href="lib/font-awesome/font-awesome-ie7.min.css" rel="stylesheet" type="text/css"/>
<![endif]-->

第三步：調用

有兩種使用方法

方法一、挑選相應圖標並獲取字體編碼(若是字庫發生過更新，編碼會發生相應的變化，須要從新獲取對應編碼)，應用於頁面。

<i class="iconfont">󰀠</i>

方法二、經過對應的css類名調用

<i class="iconfont iconfont-yunshangchuan"></i>

字體圖標的網站：

【01】官網 font awesome

http://www.bootcss.com/p/font-awesome/

【02】阿里巴巴矢量圖標

http://www.iconfont.cn/

1.1 平臺簡介

Iconfont.cn 是由阿里巴巴UX部門推出的矢量圖標管理網站，也是國內首家推廣Webfont形式圖標的平臺。網站涵蓋了1000多個經常使用圖標並還在持續更新中，Iconfont平臺爲用戶提供在線圖標搜索、圖標分撿下載、在線儲存、矢量格式轉換、我的圖標庫管理及項目圖標管理等基礎功能。同時 iconfont.cn平臺做爲矢量圖標倡導者，積極在線分享矢量圖標製做經驗、前端應用說明，及應用中常見的一些問題。

1.2 網頁矢量圖標在線生成工具

Iconfont.cn爲解決設計師製做字體圖標困難的問題，爲用戶提供了在線矢量格式轉換的功能。設計師只要將設計好的圖標上傳至平臺，平臺將會將圖標存儲在平臺上，並轉換成多種格式文件。

http://iconfont.cn/help/iconuse.html

iconfont 使用方法。