CSS進階篇--fontAwesome代替網頁icon小圖標

時間 2019-11-10

標籤 css 進階 fontawesome 代替網頁 icon 圖標欄目 CSS 简体版

原文原文鏈接

引言

奧森圖標（Font Awesome）提供豐富的矢量字體圖標—經過CSS能夠任意控制全部圖標的大小，顏色，陰影。css

網頁小圖標處處可見，若是一個網頁都是乾巴巴的文字和圖片，而沒有小圖標，會顯得很是簡陋。下面的小圖標，你也可能常常會看到的，如圖所示：
html

你可能說——「咱們用的都是彩色的，不是黑白的」——彆着急，下面會講到。由於它們也能夠變爲彩色的。前端

黑白的也好，彩色的也罷，若是用傳統的「css + 圖片」的方式來製做這些icon，我估計你至少得僱傭一個專業的設計師吧。通常的程序猿，包括前端程序猿，估計只能去搜索了，不會本身拿ps畫。瀏覽器

通常狀況咱們都會在網上搜索一些相關的圖片，好比黑白圖片的！！測試

可是問題又來了，若是你搜索來的是黑白的，如今也用黑白的，後期網站變化主題怎麼辦？你搜出來的是16 16的，要有個頁面須要 32 32的怎麼辦？若是沿着這個方向考慮，你會發現，本身將在這上面耗費大量資源和精力。字體

可是若是我告訴你，有一個東西，它已經爲你準備了將近500個經常使用icon圖標（還在不斷更新），能大能小，能隨便修改顏色，徹底開源，徹底免費，你會不會心動？若是你很是着急，先去百度一下「font-awesome」，再來繼續讀文章不遲。網站

應用font-awesome

font-awesome當前的版本是4.2.0，我們就直接用這個版本的來講。spa

先看看它的好處：
設計

下載

去http://www.thinkcmf.com/下載，解壓以後，應該能看到「css」和「font」兩個文件夾。css文件夾中存放着css文檔，font文件夾中存放在着適用於不一樣瀏覽器的字體文件。其中，css文件夾中能夠只保留 font-awesome.min.css 和 font-awesome-ie7.min.css 兩個文檔，其餘的能夠刪掉。結構應該以下：
3d

簡單應用

將整理好的文件夾加入到你的網站，新建一個測試頁面 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]-->

如上代碼，若是是IE瀏覽器，須要引入 font-awesome-ie7.min.css ，由於fontAwesome支持IE7+瀏覽器的。

引用CSS文件以後，接下來就可使用圖標了。例如，我要在頁面中顯示一個「連接」的圖標，我能夠這麼寫：

<span><i class="fa fa-link"></i> 連接</span>

此時頁面將顯示：

顯示是顯示出來了，那麼對應連接的這個css類「fa-link」我是從哪裏找來的呢？

答案很是簡單！進入官網的icon頁面，裏面有全部的icon的css類，就能夠找到你想要的那個圖標的css類了。

（注意，在「fa-link」前面還要加入一個「fa」類，例如 <i class="fa fa-link">）

設置大小和顏色

學會了以上的簡單使用，設置顏色和大小很是簡單，只要你會用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>

得出的結果就是：

其餘應用

fontAwesome還有其餘更加複雜一點的應用，包括固定寬度、浮動、反轉、旋轉、疊加圖標等。

官網上講解的更好，我就再也不這裏重複描述了，能夠去http://www.thinkcmf.com/font/...查閱這些應用的例子。

綜合實例

html代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css"/>
    <!--[if IE]>
    <link type="text/css" rel="stylesheet" href="css/font-awesome-ie7.min.css"/>
    <![endif]-->
    <style>
        html,body{width:100%;height:100%;padding:0;margin:0;}
        .login_formDiv{background: #f0f0f0;opacity: 0.8;padding: 20px;border-radius: 3px;}
        .login_formDiv .groupSame{width:252px;margin:0 auto;margin-bottom: 10px;text-align:center;position:relative;}
        .groupSame i{position: absolute;left: 10px;font-size: 24px;color: #999;top:5px;}
        .login_formDiv input{padding-left:40px;height:30px;line-height: 30px;width:210px;font-size: 14px;border:1px solid #999;}
        .login_formDiv .subtn{background: #4AB6D5 !important;padding:0;width:250px;border-radius:3px;border:1px solid #4AB6D5;cursor:pointer;font-size: 14px;color:#fff;}
    </style>
</head>
<body>
<div class="login_formDiv">
    <div class="groupSame"><input type="text" placeholder="用戶名"/><i class="fa fa-user"></i> </div>
    <div class="groupSame"><input type="password" placeholder="密碼"/><i class="fa fa-unlock-alt"></i></div>
    <div class="groupSame"><input type="submit" value="提交" class="subtn"/></div>
</div>
</body>
</html>

實現結果如圖所示：