隨著前端技術(shù)的飛速發(fā)展,涌現(xiàn)了很多新的技術(shù).而且我們在用戶體驗的路上也是一直在孜孜不倦的探索著.為了提高頁面的加載速度,渲染速度.提高用戶的體驗做出了很多努力.
可是最近發(fā)現(xiàn)很多前端開發(fā)者還是不會是用阿里媽媽這個巨大的iconFont資源庫,真的浪費(fèi)哇.所以就有了這么一篇文章.
前方高能!!!非戰(zhàn)斗人員請速速離開,下面開始事無巨細(xì)的介紹如何使用阿里媽媽的
iconFont來優(yōu)化前端圖片的使用體驗,從而降低開發(fā)成本,減少HTTP請求,從而提高用戶體驗.廢話不多少,開搞
1.首先打開
阿里媽媽的網(wǎng)站
點(diǎn)我去阿里媽媽,登錄什么的就不用說了吧-
2.建議新建一個項目,名字看個人喜好
-
這里我新建了一個項目,接下來就可以去盡情的挑選自己喜歡的圖標(biāo)了.
演示項目.png
-
-
3.Shopping
- 點(diǎn)擊
圖標(biāo)庫然后盡情的將自己喜歡的圖標(biāo)加入購物車.然后添加到我們的demo項目中來.如下圖所示:
- 點(diǎn)擊
- 4.點(diǎn)擊
查看在線鏈接,就會生成一個CSS,然后我們打開這個CSS
- 5.打開之后的CSS代碼如下圖所示:
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.eot?t=1501814101195'); /* IE9*/
src: url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.eot?t=1501814101195#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.woff?t=1501814101195') format('woff'), /* chrome, firefox */
url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.ttf?t=1501814101195') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_ve71x4r86orjxlxr.svg?t=1501814101195#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-add:before { content: "\e6df"; }
.icon-addition_fill:before { content: "\e6e0"; }
.icon-addition:before { content: "\e6e1"; }
.icon-addpeople_fill:before { content: "\e6e2"; }
.icon-browse_fill:before { content: "\e6e4"; }
.icon-browse:before { content: "\e6e5"; }
.icon-brush:before { content: "\e6e6"; }
.icon-camera:before { content: "\e6e7"; }
.icon-close:before { content: "\e6e9"; }
這里的代碼就是就是我們上面加入項目的圖標(biāo).
至此,圖標(biāo)和代碼已經(jīng)有了,那么該如何使用在項目中呢?騷年,別著急,慢慢來,看下面的代碼
前方高能!前方高能!前方高能!
- 1.我們隨便創(chuàng)建一個項目,創(chuàng)建一個CSS文件,將上面的代碼復(fù)制進(jìn)去.然后在HTML文件里面進(jìn)行引用.很簡單.看下面的代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iconFontDemoProj</title>
<link rel="stylesheet" type="text/css" href="css/icon-font.css"/>
<style type="text/css">
ul,li{
list-style: none;
}
</style>
</head>
<body>
<div class="header">
<ul>
<!--這里的i就是我們的字體圖標(biāo),第二個class就是對應(yīng)的icon-->
<li><i class="iconfont icon-close"></i>item1</li>
<li><i class="iconfont icon-addition"></i>item2</li>
<li><i class="iconfont icon-addition_fill"></i>item3</li>
</ul>
</div>
</body>
</html>
2.效果如下所示:
是不是很簡單方便?(此處貌似聽到了小豬在說:
amazing!).
而且圖片也不用去HTTP請求了:
頁面的打開速度得到了顯著的提升,amazing....Orz...
最后,是用ioncFont最大的一個好處是方便自定義,你可以像設(shè)置字體一樣設(shè)置他的顏色,大小.加粗或者是傾斜等等,方便快捷無痛,
amazing
看下面的代碼所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iconFontDemoProj</title>
<link rel="stylesheet" type="text/css" href="css/icon-font.css"/>
<style type="text/css">
ul,li{
list-style: none;
}
/*在這里可以很方便的定義字體的一些屬性*/
.iconfont{
font-size: 20px;
font-weight: bold;
margin: 0 10px 0 0;
font-style: inherit;
}
.icon-close{
color: red;
}
.icon-addition{
color: yellowgreen;
}
.icon-addition_fill{
color:cyan
}
</style>
</head>
<body>
<div class="header">
<ul>
<!--這里的i就是我們的字體圖標(biāo),第二個class就是對應(yīng)的icon-->
<li><i class="iconfont icon-close"></i>item1</li>
<li><i class="iconfont icon-addition"></i>item2</li>
<li><i class="iconfont icon-addition_fill"></i>item3</li>
</ul>
</div>
</body>
</html>
效果如下圖所示:
結(jié)束語
至此,一個很簡單的阿里媽媽字體圖標(biāo)使用教程就完事了,當(dāng)然你也可以上傳你自己的SVG,從而生成相關(guān)的CSS代碼,其實(shí)也是很簡單的.這里就不在詳細(xì)的說明了,需要大家自己去探索一下.
OK,最后的最后,鼓掌撒花....
