圖示字型對你的網站來說非常棒：原因如下

今天我將向您展示什麼是圖示字型，以及如何使用它們來活躍您的網站。...

你聽說過圖標，也幾乎肯定聽說過字體，但什麼是圖標字體？今天我將向您展示什麼是圖標字體，以及如何使用它們來活躍您的網站。我們開始吧。

什麼是圖標字體(icon fonts)？

圖標字體與“常規”字體完全相同——它們定義了一段文本的外觀。這裡最大的區別是圖標字體不包含字母和數字，而是包含符號和圖標。你可能會對此感到困惑，因為如果你不能給媽媽寫信，字體有什麼用呢！

圖標字體主要用於設計網站樣式。由於它們是基於向量的，因此可以使用CSS調整大小、移動、設置樣式和更改。與傳統的設計方法（如圖像）相比，這提供了巨大的優勢。只需幾行代碼就可以改變大量圖標的外觀。你不需要編輯任何圖像，打開Photoshop，或者上傳新文件，你只需要編寫代碼。

入門

我將在這些示例中使用FontAwesome，但該理論可以應用於許多其他字體包。

以下是入門HTML：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>MUO Icon Fonts</title><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><style>html {font-family: helvetica, arial;}</style></head><body></body></html>

這是生成網頁所需的最小HTML量。我不會解釋它的大部分，因為我們已經涵蓋了在我們的指南如何使一個網站。

最重要的一行是：

這將從CDN加載字體樣式表。沒有這一行，你的網站將不知道什麼是字體真棒，所以這是相當重要的。這個樣式表處理了嵌入web字體的所有困難工作，並且通常使事情變得更容易。

字體圖標由添加到i標籤的CSS類定義。選擇這些圖標是因為它們沒有附加任何瀏覽器或默認定義的樣式，所以您的圖標不會亂七八糟。或者，可以將類添加到span標記中，但這會使HTML變得混亂。

以下是基本用法。把這個放在你的身體標籤裡：

My First Icon

下面是它的樣子：

那有多容易？我們把它分解一下。Font Awesome需要兩個類才能工作。第一種叫做fa，它代表字體。這是任何圖標都需要的，無論您使用哪一個。第二個類指定您希望使用的特定圖標——可以是任何東西，飛機、人或信用卡。它的前綴也是fa，因為這是一個cog圖標，所以它的名稱是fa cog。你可以在他們的網站上查看所有圖標的列表。

嘗試將圖標從cog更改為其他圖標。

深入

一旦你知道了基礎知識，就到了學習高級技巧的時候了。

如果您不想編寫自己的CSS，可以直接使用內置的樣式。有許多類可用於將圖標變大：

另一個有用的類是fa spin。這將使你的圖標旋轉，當與以前的大小類相結合，你可以產生一些不錯的效果。代碼如下：

結果如下：

很容易旋轉圖標--使用fa rotate類：

最後的數字定義了圖標的旋轉角度，但不要太過激動。你被限制在90，180，或270。

最後一個技巧是堆疊。fa stack類允許您將兩個或多個圖標組合在一起。代碼如下：

下面是它的樣子：

一旦你開始組合所有這些不同的類，可能性真的是無窮無盡的。

自定義css

因為圖標字體只是字體，所以可以像使用其他元素一樣使用CSS設置它們的樣式。使用一點CSS3可以大有幫助：

下面是該圖標的HTML：

以下是CSS：

@keyframes move { from { margin-left: 0; } to { margin-left: 400px; }}.bike { animation-name: move; animation-duration: 4s;}

這個CSS非常基本，但是影響很大。這不是一個CSS教程，所以你可能想學習CSS如果你想知道更多的內部工作。

如果你真的想，你可以做一些特別的事情：

為了減少web的文件大小，這會有點結巴。以下是HTML：

以下是CSS：

@keyframes fade { from { opacity: 0; } to { opacity: 1; }}.person { opacity: 0; animation-name: fade;}#p1 { color: red; animation-duration: 2s;}#p2 { color: orange; animation-duration: 4s;}#p3 { color: green; animation-duration: 6s;}#p4 { animation-duration: 8s;}

與上一個示例一樣，它使用CSS3動畫。將創建一個名為“淡入淡出”的動畫，每個人圖標都以不同的時間實現該動畫。使用這些圖標和CSS3有很大的潛力。

今天就這些。你現在應該能夠使用圖標字體來活躍你的網站！如果你對自己的技能還不太確定，可以看看這些CSS模板網站或YouTube頻道，開始網頁設計。

你今天學到什麼新東西了嗎？你最喜歡的圖標字體是什麼？請在下面的評論中告訴我們！