開源圖標字體 uiw-iconfont v1.2.6 發佈，新增圖標

uiw-iconfont v1.2.6 已發佈，uiw-iconfont 是從 uiw 組件庫抽離出來的圖標字體，基於 svg 圖片生成的圖標字體。

更新內容

• 新增 map android-o dashboard table qrcode printer barcode 等7個圖標.

安裝

npm install uiw-iconfont --save

 

使用

您能夠使用 uiw-react.github.io/icons/ 輕鬆找到您要使用的圖標。一旦您複製了所需圖標的CSS類名，只需將圖標和圖標的類名（如apple）添加到HTML元素便可。

你須要連接CSS

<link rel="stylesheet" type="text/css" href="node_modules/fonts/w-iconfont.css">

 

用於Less：

@import "~uiw-iconfont/fonts/w-iconfont.css";

 

注意：它有一個w-icon-前綴。

<i class="w-icon-apple"></i>

 

或者使用Unicode，您能夠使用Unicode網站輕鬆找到您要使用的Unicode圖標。

<style> .iconfont { font-family: "w-iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;
} </style> 
<span class="iconfont">&#59907;</span>

 

開發

在克隆項目以後運行npm install來安裝依賴，你可以作以下操做：

編譯字體.svg.ttf.woff.eot等字體文件

npm run font

 

編譯網站並提交到gh-pages分支

npm run start

 

相關連接

• uiw-iconfont 的詳細介紹：點擊查看

• 碼雲極速下載/uiw-iconfont：下載zip

iconfont-矢量圖標字體的運用：

發現一個奇怪的現象：

這裏面的圖標居然不是一張張小圖標圖片？Firebug下查看一下元素，居然是這樣的：

頁面源代碼以下：

好奇怪啊，這些個亂七八糟的&#xfxxx難道就是對應的圖標？

使用icon font來生成圖標相對於基於圖片的圖標來講，有以下的好處：

1.自由的變化大小；

2.自由的修改顏色；

3.添加陰影效果；

4.IE6也能夠支持；

5.支持圖片圖標的其它屬性，例如，透明度和旋轉等等6.能夠添加text-stroke和background-clip:text等屬性，只要瀏覽器支持。

那麼如何使用iconfont呢？能夠有以下幾種方式：

1.使用現有的開源iconfont矢量圖標字體庫。如

阿里icon font字庫

http://www.iconfont.cn/

這個是阿里M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里圖標庫。

fontello

http://fontello.com/

在線定製你本身的icon font字體圖標字庫，也能夠直接從GitHub下載整個圖標集，該項目也是的。

icomoon

http://icomoon.io//#/select

能夠在線導入的SVG格式字體，並進行編輯，而後下載來使用。很酷吧！

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

這是我最喜歡的字庫之一了，更新比較快。目前已經有369個圖標了。

Glyphicon Halflings

http://glyphicons.com/

這個字體圖標能夠在Bootstrap下無償使用。自帶了200多個圖標。

2.建立本身的iconfont字體庫，能夠使用以上各平臺的在線生成工具，也能夠推薦使用一些生成iconfont的工具，如iconmoon。

3.那麼具體該如何使用這種字體圖標呢？其實很簡單，以PC端的應用爲例，只須要分三步便可完成：

以上demo使用方法詳情請參考：http://www.iconfont.cn/help/iconuse.html

參考文獻：

http://www.iconfont.cn/

http://www.chinaz.com/design/2012/0904/272556.shtml

http://www.weste.net/2013/12-13/94697.html

原做者：開源中國