图标字体对你的网站来说非常棒：原因如下

今天我将向您展示什么是图标字体，以及如何使用它们来活跃您的网站。...

你听说过图标，也几乎肯定听说过字体，但什么是图标字体？今天我将向您展示什么是图标字体，以及如何使用它们来活跃您的网站。我们开始吧。

icon-fonts-website

什么是图标字体(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

下面是它的样子：

First Icon

那有多容易？我们把它分解一下。Font Awesome需要两个类才能工作。第一种叫做fa，它代表字体。这是任何图标都需要的，无论您使用哪一个。第二个类指定您希望使用的特定图标——可以是任何东西，飞机、人或信用卡。它的前缀也是fa，因为这是一个cog图标，所以它的名称是fa cog。你可以在他们的网站上查看所有图标的列表。

尝试将图标从cog更改为其他图标。

深入

一旦你知道了基础知识，就到了学习高级技巧的时候了。

如果您不想编写自己的CSS，可以直接使用内置的样式。有许多类可用于将图标变大：

Sized Ic***

另一个有用的类是fa spin。这将使你的图标旋转，当与以前的大小类相结合，你可以产生一些不错的效果。代码如下：

结果如下：

Spinning Icon

很容易旋转图标--使用fa rotate类：

最后的数字定义了图标的旋转角度，但不要太过激动。你被限制在90，180，或270。

Ic*** Rotated

最后一个技巧是堆叠。fa stack类允许您将两个或多个图标组合在一起。代码如下：

下面是它的样子：

Ic*** Stacked

一旦你开始组合所有这些不同的类，可能性真的是无穷无尽的。

自定义css

因为图标字体只是字体，所以可以像使用其他元素一样使用CSS设置它们的样式。使用一点CSS3可以大有帮助：

Icon Animation

下面是该图标的HTML：

以下是CSS：

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

这个CSS非常基本，但是影响很大。这不是一个CSS教程，所以你可能想学习CSS如果你想知道更多的内部工作。

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

Icon Animation

为了减少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频道，开始网页设计。

你今天学到什么新东西了吗？你最喜欢的图标字体是什么？请在下面的评论中告诉我们！