東拼西湊完成一個「前端框架」(2) - 字體圖標

時間 2020-01-07

標籤東拼西湊完成一個前端框架字體圖標简体版

原文原文鏈接

前言

還記得之前開發的項目目錄下都會存放一大堆圖標文件，難以維護，同時圖標和字體的對齊也是一個麻煩事兒；css

下面簡單列出字體圖標的優劣勢，內容摘自圖標字體的優缺點和使用html

優點

輕量級：一個圖標字體要比一系列的圖像要小。一旦字體加載了，圖標就會立刻渲染出來，不須要下載一個個圖像。這樣能夠減小HTTP的請求數量，並且和HTML5的離線存儲配合，能夠對性能作出優化。前端
靈活性：不調字體能夠像頁面中的文字同樣，經過font-size屬性來對其進行大小的設置，並且還能夠添加各類文字效果，如color、hover、filter、text-shadow、transform等效果。靈活的簡直不像話！git
兼容性：圖標字體支持現代瀏覽器，甚至是低版本的IE瀏覽器，因此能夠放心的使用它。
相比於位圖放大圖片會出現失真、縮小又會浪費掉像素點，圖標字體不會出現這種狀況。github

劣勢

圖標字體只能被渲染成單色，或者是CSS3的漸變色
版權上也有着對應的限制，固然仍是有不少免費的圖標字體能夠供咱們下載。
當本身創做圖標字體的時候，是比較耗費時間的，重構人員的後期維護成本也比較高

目前我的推薦的圖標庫有 font-awesome、Bootstrap Glyphicons、Ionicons、themify-icons；瀏覽器

假如你想自定義一些字體圖標，那麼強力推薦阿里巴巴的 Iconfont前端框架

Start

iconfont

iconfont的使用就不贅述了，請移步Iconfont官方幫助文檔，繼續咱們的「前端框架」，在Iconfont的項目里加入了一些圖標：

而後複製連接在瀏覽器中打開：
框架

新建一個icon.css文件，把代碼粘貼進去；
新建一個頁面，代碼：frontend

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>首頁-歡迎</title>
    <link href="css/icon.css" rel="stylesheet" />
</head>

<body>
    <i class="icon ls-icon-shrink-right"></i>
    <i class="icon ls-icon-spread-left"></i>
    <i class="icon ls-icon-user"></i>
    <i class="icon ls-icon-password"></i>
</body>

</html>

預覽效果
ionic