超赞网站推荐

by Pubudu Dodangoda

通过Pubudu Dodangoda

字体(更多)超赞-标志性发明 (Font (More) Awesome — an iconic invention)

Whether you are building a website, a mobile app, or even a standalone app, there are few things you can never escape. The proper use of graphics and icons is one such basic need. Fancy icons are just as important as alignments and color combinations. That is because a single icon can express what a hundred words can say!

无论您是构建网站，移动应用程序，甚至是独立应用程序，都有很少的事情是您无法逃脱的。 正确使用图形和图标就是这种基本需求之一。 花式图标与路线和颜色组合一样重要。 那是因为单个图标可以表达一百个单词可以说的话！

While there are numerous ways to add icons to a website, the most popular way is to use Font Awesome. Once you perform the required configurations, adding an icon is as simple as this:

尽管有很多方法可以向网站添加图标，但是最流行的方法是使用“真棒字体”。 一旦执行了所需的配置，添加图标就这么简单：

<i class="fa fa-bell"></i>

Yet, there are situations where the icon set provided by Font Awesome is insufficient. For example, I recently wanted to use the logos of Facebook, Twitter, and Airbnb on a website. And it took me by surprise — the Airbnb icon was not included in Font Awesome. In fact, the community had requested the Airbnb icon about 3 years back. Yet the icon is still not in the official icon set.

但是，在某些情况下，Font Awesome提供的图标集不足。 例如，我最近想在网站上使用Facebook，Twitter和Airbnb的徽标。 这让我感到惊讶-“超棒”中未包含Airbnb图标。 实际上，社区早在3年前就已要求使用Airbnb图标。 但是该图标仍不在官方图标集中。

Also, if you want a custom icon which is not very popular, the least complex way to add it is using an img tag. This is too much work compared to using Font Awesome. On the other hand, the Font Awesome guys can’t cater to all icon requests, practically speaking.

此外，如果您希望使用的自定义图标不是很流行，则添加图标最简单的方法是使用img标签。 与使用Font Awesome相比，这是太多的工作。 另一方面，实际上，Font Awesome家伙无法满足所有图标要求。

So I searched for an easy way to get the icons I needed, without depending on a third party. Luckily, I found a tool called Calligraphr. I’ll now explain how I used this tool, some CSS knowledge, and few other simple tricks to be able to do the following in my code:

因此，我寻求一种简单的方法来获取所需的图标，而无需依赖第三方。 幸运的是，我找到了一个名为Calligraphr的工具。 现在，我将解释如何使用此工具，一些CSS知识以及一些其他简单的技巧，以便能够在我的代码中执行以下操作：

<i class="fa fa-troll"/><i class="fa fa-like-a-boss"/><i class="fa fa-lol"/>

Pretty cool right? Then let’s build Font More Awesome!

很酷吧？ 然后， 让我们构建更棒的字体！

创建字体 (Creating a Font)

The first milestone on our journey is to create the Font More Awesome font using the instructions on their website. The first step is to download the template. Here is an example:

我们旅程中的第一个里程碑是使用其网站上的说明来创建Font More Awesome字体。 第一步是下载模板。 这是一个例子：

Now what we have to do is fill in these boxes with our desired icons. You can either print and draw the icons by hand, or use a tool like Adobe Photoshop or GIMP to use images downloaded from the internet.

现在，我们要做的是在这些框中填写所需的图标。 您可以手工打印和绘制图标，也可以使用Adobe Photoshop或GIMP之类的工具来使用从Internet下载的图像。

After filling the template, it will look as follows:

填写模板后，它将如下所示：

The next thing you have to do is quite simple. Just upload the filled template to the calligraphr website, and click on the “build font” button — and BOOM! Your custom font will be downloaded. Let’s name it FontMoreAwesome.otf

接下来要做的很简单。 只需将填充的模板上传到书法家网站，然后单击“构建字体”按钮-即可！ 您的自定义字体将被下载。 让我们将其命名为FontMoreAwesome.otf

If you are wondering what magic just happened, it’s called image vectorization or Image Tracing. Because of the underlying tracing algorithm, you might notice slight differences between the image used and the actual icon created. But, once the images are converted to a vector, they can scale up and down, without losing quality.

如果您想知道发生了什么魔术，那就叫图像矢量化或图像跟踪。 由于底层的跟踪算法，您可能会注意到所使用的图像和创建的实际图标之间存在细微差异。 但是，一旦将图像转换为矢量，它们就可以放大和缩小，而不会损失质量。

与Font Awesome集成 (Integrating with Font Awesome)

Of course you can treat the new font file as a separate icon set. But wouldn’t it be cool if we could extend the Font Awesome font itself? Let’s do it!

当然，您可以将新字体文件视为单独的图标集。 但是，如果我们可以扩展Font Awesome字体本身，那不是很酷吗？ 我们开始做吧！

One thing that you should understand here is that we are going to inherit the CSS rules defined by the Font Awesome CSS file. For example, it will contain an entry as follows:

您在这里应该了解的一件事是，我们将继承由Font Awesome CSS文件定义CSS规则。 例如，它将包含如下条目：

.fa {  display: inline-block;  font: normal normal normal 14px/1 FontAwesome;  font-size: inherit;  text-rendering: auto;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}

That means that when we define an icon element as follows, it will inherit styles such as display, font-size, and text-rendering from the above.

这意味着当我们按如下方式定义图标元素时，它将从上面继承样式，例如display ， font-size和text-rendering 。

<i class="fa fa-troll"/>

Now let’s define our custom CSS file. Let’s name the file font-more-awesome.css

现在，让我们定义我们的自定义CSS文件。 让我们将文件命名为font-more-awesome.css

The first entry of this file should be the font-face declaration. This can be done as follows. No big deal. Just some basic CSS.

该文件的第一个条目应该是字体声明。 这可以如下进行。 没什么大不了的。 只是一些基本CSS。

@font-face {    font-family: 'FontMoreAwesome';    src: url('../fonts/FontMoreAwesome.otf');    font-weight: normal;    font-style: normal;}

Then we can easily define the custom icons we want like this:

然后，我们可以像这样轻松定义所需的自定义图标：

.fa-troll:before {    font-family: FontMoreAwesome;    content: "A";}.fa-lol:before {    font-family: FontMoreAwesome;    content: "B";}.fa-like-a-boss:before {    font-family: FontMoreAwesome;    content: "C";}

Note here that we are defining the icons as pseudo-elements using the before selector. That way, we can inject the content we want into the element which uses these classes.

请注意，这里我们使用before选择器将图标定义为伪元素。 这样，我们可以将所需的内容注入使用这些类的元素中。

In the FontMoreAwesome font we created, “A,” “B,” and “C” are represented by the icons for Troll, Lol, and Like-a-boss respectively. This is not the best way to do it, though.

在我们创建的FontMoreAwesome字体中，“ A”，“ B”和“ C”分别由Troll，Lol和Like-a-boss的图标表示。 但是，这并不是最好的方法。

Font Awesome uses Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons.

Font Awesome使用Unicode专用区(PUA)来确保屏幕阅读器不会读取代表图标的随机字符。

But for our example, we’ll stick with the English alphabet letters to keep the story simple.

但在我们的示例中，我们将坚持使用英文字母以使故事保持简单。

Another thing to note in the above example is that we override the font-family defined by Font Awesome while injecting custom content.

在上面的示例中要注意的另一件事是，在注入自定义内容时，我们将覆盖由Font Awesome定义的字体系列。

让我们使用更棒的字体 (Let’s Use Font More Awesome)

The final step is to load this CSS file into the index.html file, which is pretty easy.

最后一步是将该CSS文件加载到index.html文件中，这非常简单。

<link href="css/font-more-awesome.css" rel="stylesheet">

Now you can use these icons as any other fa icon. For example, the following icon will be large and will spin.

现在，您可以将这些图标用作其他任何fa图标。 例如，以下图标将很大并且会旋转。

<i class="fa fa-troll fa-spin fa-lg"/>

你喜欢这个故事吗？ 然后，您可以做一件事... (Did you enjoy this story? Then there’s one little thing you could do…)

翻译自: https://www.freecodecamp.org/news/lets-use-font-more-awesome-to-make-an-iconic-invention-a95324d92ace/

超赞网站推荐