<address id="xdftd"><form id="xdftd"><meter id="xdftd"></meter></form></address>
              <form id="xdftd"><nobr id="xdftd"><nobr id="xdftd"></nobr></nobr></form>

                  <sub id="xdftd"></sub>

                        <address id="xdftd"><nobr id="xdftd"></nobr></address>

                          福州網站建設>網站新聞>php技術

                          使用font-awesome小圖標

                          發布日期:2018-03-18瀏覽次數:680 來源:福州網站建設

                          1. 引言 
                            網頁小圖標到處可見,如果一個網頁都是干巴巴的文字和圖片,而沒有小圖標,會顯得非常簡陋。下面的小圖標,你是不是會經常用到?

                          這里寫圖片描述

                          你可能說——“我們用的都是彩色的,不是黑白的”——別著急,下面會講到。因為它們也可以變為彩色的。

                          黑白的也好,彩色的也罷,如果用傳統的“css + 圖片”的方式來制作這些icon,我估計你至少得雇傭一個專業的設計師吧。一般的程序猿,包括前端程序猿,估計只能去搜索了,不會自己拿ps畫。例如,我之前經常去一個叫做“懶人圖庫”的網站去找資源,現在那個網站還存在。 
                          這里寫圖片描述

                          但是問題又來了,如果你搜索來的是黑白的,現在也用黑白的,后期網站變化主題怎么辦?你搜出來的是16 * 16的,要有個頁面需要 32 * 32的怎么辦?如果沿著這個方向考慮,你會發現,自己將在這上面耗費大量資源和精力。

                          但是如果我告訴你,有一個東西,它已經為你準備了將近500個常用icon圖標(還在不斷更新),能大能小,能隨便修改顏色,完全開源,完全免費,你會不會心動?如果你非常著急,先去百度一下“font-awesome”,再來繼續讀文章不遲。

                          1. 應用font-awesome 
                            font-awesome當前的版本是4.2.0,咱們就直接用這個版本的來說。

                          2.1 下載

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

                          這里寫圖片描述

                          2.2 簡單應用

                          將整理好的文件夾加入到你的網站,新建一個測試頁面 demo.html,將css文件夾中的兩個css文件,引入到頁面。

                          <link href="fontawesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" />
                          <!--[if IE]>
                          <link href="fontawesome-4.2.0/css/font-awesome-ie7.min.css" rel="stylesheet" />
                          <![endif]-->
                          • 1
                          • 2
                          • 3
                          • 4

                          如上圖,如果是IE瀏覽器,需要引入 font-awesome-ie7.min.css ,因為fontAwesome支持IE7+瀏覽器的。(唉。。為何不再往前延伸到支持IE6呢。。。)

                          引用CSS文件之后,接下來就可以使用圖標了。例如,我要在頁面中顯示一個“鏈接”的圖標,我可以這么寫:

                          <span><i class="fa fa-link"></i> 鏈接</span>
                          • 1

                          此時頁面將顯示:

                          顯示是顯示出來了,那么對應鏈接的這個css類“fa-link”我是從哪里找來的呢?

                          答案非常簡單!進入官網的icon頁面,里面有所有的icon的css類,就可以找到你想要的那個圖標的css類了。  這里寫圖片描述

                          (注意,在“fa-link”前面還要加入一個“fa”類,例如 

                          2.3 設置大小和顏色

                          學會了以上的簡單使用,設置顏色和大小非常簡單,只要你會用css設置文字的顏色和大小就行。直接看代碼:

                          復制代碼

                          <span style="font-size:12px;"><i class="fa fa-link"></i> 鏈接</span>
                          <br />
                          <span style="font-size:20px;"><i class="fa fa-link"></i> 鏈接</span>
                          <br />
                          <span style="color:red"><i class="fa fa-link"></i> 鏈接</span>
                          <br />
                          <span style="color:white;background-color:#003399;"><i class="fa fa-link"></i> 鏈接</span>
                          • 1
                          • 2
                          • 3
                          • 4
                          • 5
                          • 6
                          • 7

                          復制代碼  得出的結果就是:

                          這里寫圖片描述

                          so easy 吧!這樣看來它確實是個好東西。

                          最后總結,看起來阿里巴巴圖庫比較試合國人

                          php技術有關的文章
                          如果您有什么問題,歡迎咨詢我們客服! 點擊QQ咨詢
                          双乳被三男吸的小说

                            <address id="xdftd"><form id="xdftd"><meter id="xdftd"></meter></form></address>
                                      <form id="xdftd"><nobr id="xdftd"><nobr id="xdftd"></nobr></nobr></form>

                                          <sub id="xdftd"></sub>

                                                <address id="xdftd"><nobr id="xdftd"></nobr></address>