Font Awesome圖標字體應用及相關

時間 2019-12-08

標籤 font awesome 圖標字體應用相關简体版

原文原文鏈接

　　做爲web開發者，不免要常常要用到些小圖標，給本身web增添幾分活力和多樣性。像這些：css

　　而Font Awesome恰好爲咱們提供了這些。到目前爲止，Font Awesome提供了有500多個可縮放的的矢量圖標，而且能夠使用css所提供的全部特性對這些圖標進行更改，包括：大小、顏色、陰影或者其餘任何支持的效果。這些圖標基本涵蓋了web開發者的基本需求，而且Font Awesome還在不斷維護更新，提供新的圖標，以供開發者使用。html

　　在此，主要介紹一下Font Awesome圖標字體的基本使用。web

　　到Font Awesome上去下載它的圖標字體，咱們這裏只是用默認css。將font-awesome.min.css引用到本身的頁面。字體

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
</head>

　　而後就能夠使用Font Awesome爲咱們提供的500多個圖標字體了。動畫

　　首先，實現一個常常表示「首頁」的小房子的圖標。spa

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
</head>

<body style="background-color:#DBDBDB">
    <i class="fa fa-home"></i> Home  
</body>
</html>

　　頁面效果：3d

　　固然圖標大小可能不能達到你的要求，那麼你能夠本身定義大小，或者用Font Awesome提供的幾個大小樣式類。fa-lg, fa-2x, fa-3x, fa-4x, fa-5x。code

    <i class="fa fa-home"></i> 原始大小<br>  
    <i class="fa fa-home fa-4x"></i> fa-4x<br>    
    <i class="fa fa-home" style="font-size:30px;"></i> 自定義大小-30px

　　頁面效果：htm

　　固然，顏色也是你爲所欲爲能夠設置的。blog

    <i class="fa fa-home fa-2x"></i> 原始色<br>    
    <i class="fa fa-home fa-2x" style="color:#008B00"></i> 草綠色

　　頁面效果：

　　也能夠將圖標旋轉下。

    <i class="fa fa-home fa-2x"></i> 原始<br>
    <i class="fa fa-home fa-2x fa-rotate-90"></i> fa-rotate-90<br>
    <i class="fa fa-home fa-2x fa-rotate-180"></i> fa-rotate-180<br>
    <i class="fa fa-home fa-2x fa-rotate-270"></i> fa-rotate-270<br>
    <i class="fa fa-home fa-2x fa-flip-horizontal"></i> fa-flip-horizontal<br>
    <i class="fa fa-home fa-2x fa-flip-vertical"></i> fa-flip-vertical<br>

　　頁面效果：

　　font awesome提供了一些類，用於設置圖標的固定寬度（fa-fw），用於列表模式（fa-ul 和 fa-li），邊框與對齊（fa-ul 和 fa-li）以及圖標的組合使用，好比空白的邊框中添加其餘圖標。詳細點我。

　　這裏咱們重點介紹下圖標的動畫使用。font awesome提供了fa-spin和fa-pulse兩個類實現圖標動畫效果，主要適用於適合旋轉的圖標。

    <i class="fa fa-spinner fa-2x fa-spin"></i>
    <i class="fa fa-circle-o-notch fa-2x fa-spin"></i>
    <i class="fa fa-refresh fa-2x fa-spin"></i>
    <i class="fa fa-cog fa-2x fa-spin"></i>
    <i class="fa fa-spinner fa-2x fa-pulse"></i>

　　頁面效果：

　　固然，咱們能夠本身定義一些樣式用於控制圖標的動畫效果。這裏咱們引入本身定義的css樣式my.css。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/my.css">
</head>

<body style="background-color:#DBDBDB">
    <div style="padding-left:100px; padding-top:200px;">  &nbsp;
        <i class="fa fa-envelope fa-2x icon-animated-vertical"></i> &nbsp;
        <i class="fa fa-hand-o-right fa-2x icon-animated-hand-pointer"></i> &nbsp;
        <i class="fa fa-bell fa-2x icon-animated-bell"></i> &nbsp;        
        <i class="fa fa-wrench fa-2x icon-animated-wrench"></i>        
    </div>
</body>
</html>