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

資訊專欄INFORMATION COLUMN

CSS進(jìn)階篇--fontAwesome代替網(wǎng)頁(yè)icon小圖標(biāo)

paney129 / 2569人閱讀

摘要：網(wǎng)頁(yè)小圖標(biāo)到處可見，如果一個(gè)網(wǎng)頁(yè)都是干巴巴的文字和圖片，而沒有小圖標(biāo)，會(huì)顯得非常簡(jiǎn)陋。直接看代碼鏈接鏈接鏈接鏈接得出的結(jié)果就是其他應(yīng)用還有其他更加復(fù)雜一點(diǎn)的應(yīng)用，包括固定寬度浮動(dòng)反轉(zhuǎn)旋轉(zhuǎn)疊加圖標(biāo)等。

引言

奧森圖標(biāo)（Font Awesome）提供豐富的矢量字體圖標(biāo)—通過(guò)CSS可以任意控制所有圖標(biāo)的大小 ，顏色，陰影。

網(wǎng)頁(yè)小圖標(biāo)到處可見，如果一個(gè)網(wǎng)頁(yè)都是干巴巴的文字和圖片，而沒有小圖標(biāo)，會(huì)顯得非常簡(jiǎn)陋。下面的小圖標(biāo)，你也可能經(jīng)常會(huì)看到的，如圖所示：

你可能說(shuō)——“我們用的都是彩色的，不是黑白的”——?jiǎng)e著急，下面會(huì)講到。因?yàn)樗鼈円部梢宰優(yōu)椴噬摹?/p>

黑白的也好，彩色的也罷，如果用傳統(tǒng)的“css + 圖片”的方式來(lái)制作這些icon，我估計(jì)你至少得雇傭一個(gè)專業(yè)的設(shè)計(jì)師吧。一般的程序猿，包括前端程序猿，估計(jì)只能去搜索了，不會(huì)自己拿ps畫。

一般情況我們都會(huì)在網(wǎng)上搜索一些相關(guān)的圖片，比如黑白圖片的??！

但是問題又來(lái)了，如果你搜索來(lái)的是黑白的，現(xiàn)在也用黑白的，后期網(wǎng)站變化主題怎么辦？你搜出來(lái)的是16 16的，要有個(gè)頁(yè)面需要 32 32的怎么辦？如果沿著這個(gè)方向考慮，你會(huì)發(fā)現(xiàn)，自己將在這上面耗費(fèi)大量資源和精力。

但是如果我告訴你，有一個(gè)東西，它已經(jīng)為你準(zhǔn)備了將近500個(gè)常用icon圖標(biāo)（還在不斷更新），能大能小，能隨便修改顏色，完全開源，完全免費(fèi)，你會(huì)不會(huì)心動(dòng)？如果你非常著急，先去百度一下“font-awesome”，再來(lái)繼續(xù)讀文章不遲。

應(yīng)用font-awesome

font-awesome當(dāng)前的版本是4.2.0，咱們就直接用這個(gè)版本的來(lái)說(shuō)。

先看看它的好處：

下載

去http://www.thinkcmf.com/下載，解壓之后，應(yīng)該能看到“css”和“font”兩個(gè)文件夾。css文件夾中存放著css文檔，font文件夾中存放在著適用于不同瀏覽器的字體文件。其中，css文件夾中可以只保留 font-awesome.min.css 和 font-awesome-ie7.min.css 兩個(gè)文檔，其他的可以刪掉。結(jié)構(gòu)應(yīng)該如下：

簡(jiǎn)單應(yīng)用

將整理好的文件夾加入到你的網(wǎng)站，新建一個(gè)測(cè)試頁(yè)面 demo.html，將css文件夾中的兩個(gè)css文件，引入到頁(yè)面。

如上代碼，如果是IE瀏覽器，需要引入 font-awesome-ie7.min.css ，因?yàn)?b>fontAwesome支持IE7+瀏覽器的。

引用CSS文件之后，接下來(lái)就可以使用圖標(biāo)了。例如，我要在頁(yè)面中顯示一個(gè)“鏈接”的圖標(biāo)，我可以這么寫：

 鏈接

此時(shí)頁(yè)面將顯示：

顯示是顯示出來(lái)了，那么對(duì)應(yīng)鏈接的這個(gè)css類“fa-link”我是從哪里找來(lái)的呢？

答案非常簡(jiǎn)單！進(jìn)入官網(wǎng)的icon頁(yè)面，里面有所有的icon的css類，就可以找到你想要的那個(gè)圖標(biāo)的css類了。

（注意，在“fa-link”前面還要加入一個(gè)“fa”類，例如 ）

設(shè)置大小和顏色

學(xué)會(huì)了以上的簡(jiǎn)單使用，設(shè)置顏色和大小非常簡(jiǎn)單，只要你會(huì)用css設(shè)置文字的顏色和大小就行。直接看代碼：

 鏈接


 鏈接


 鏈接


 鏈接

得出的結(jié)果就是：

其他應(yīng)用

fontAwesome還有其他更加復(fù)雜一點(diǎn)的應(yīng)用，包括固定寬度、浮動(dòng)、反轉(zhuǎn)、旋轉(zhuǎn)、疊加圖標(biāo)等。

官網(wǎng)上講解的更好，我就不再這里重復(fù)描述了，可以去http://www.thinkcmf.com/font/...查閱這些應(yīng)用的例子。

綜合實(shí)例

html代碼：

實(shí)現(xiàn)結(jié)果如圖所示：

demo下載請(qǐng)點(diǎn)擊這兒

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/111154.html

相關(guān)文章

  • 重拾css(8)——盒子模型

    摘要：盒子的寬度設(shè)置固定寬度的情況在盒子模型中，我們?cè)O(shè)置的寬度都是內(nèi)容寬度，不是整個(gè)盒子的寬度。這樣我們改四個(gè)中的其中一個(gè)，都會(huì)導(dǎo)致盒子寬度的改變。包裹內(nèi)容的情況這種情況下比較簡(jiǎn)單，盒子的寬度將隨著內(nèi)容寬度的增加而增加。 1.引言 從這一節(jié)開始，我們就進(jìn)入本系列的第三部分——css呈現(xiàn)。本部分將描述css在頁(yè)面的幾種布局和呈現(xiàn)的特性。包括兩類：文字、塊。第一類——文字。這部分相對(duì)比較簡(jiǎn)單一些...

    SnaiLiu 評(píng)論0 收藏0

  • 應(yīng)該了解的 Web 圖標(biāo)解決方案

    摘要：那么，在我們當(dāng)下的前端開發(fā)中，最常見的圖標(biāo)解決方案有哪些呢大概是三種，圖片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一圖勝千言。 沒錯(cuò)，從 Web 誕生的那天開始，圖標(biāo)就成為視覺層面不可或缺的一個(gè)元素，在一個(gè) Web 頁(yè)面中，...

    zhangwang 評(píng)論0 收藏0

  • 應(yīng)該了解的 Web 圖標(biāo)解決方案

    摘要：那么，在我們當(dāng)下的前端開發(fā)中，最常見的圖標(biāo)解決方案有哪些呢大概是三種，圖片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一圖勝千言。 沒錯(cuò)，從 Web 誕生的那天開始，圖標(biāo)就成為視覺層面不可或缺的一個(gè)元素，在一個(gè) Web 頁(yè)面中，...

    ingood 評(píng)論0 收藏0

  • 編寫大型項(xiàng)目web頁(yè)面 樣式基礎(chǔ)搭建

    摘要：文中的一些方法來(lái)源于我的有出售請(qǐng)大家自行拷貝粘貼顏色要使用代詞加數(shù)字大小形式數(shù)字規(guī)格顏色變量不許由或者方法計(jì)算得出項(xiàng)目顏色基于配色基礎(chǔ)色庫(kù)設(shè)計(jì)師都會(huì)配出來(lái)項(xiàng)目色庫(kù)需要項(xiàng)目去改變?cè)O(shè)計(jì)師文字和前端頁(yè)面開發(fā)者文字必須為同一類 文中sass的一些方法 來(lái)源于我的sassstd zhilizhili-mei zhilizhili-ui npm 有出售 請(qǐng)大家自行拷貝粘貼 showImg(ht...

    smartlion 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<