react awesome_如何在React中使用Awesome 5字体

react awesome

介绍 (Introduction)

Font Awesome is a toolkit for websites that provides icons and social logos. React is a coding library that is used for creating user interfaces. While the Font Awesome team has made a React component to promote integration, there are some fundamentals to understand about Font Awesome 5 and how it is structured. In this tutorial you’ll explore how to use the React Font Awesome component.

Font Awesome是用于网站的工具包，提供图标和社交徽标。 React是用于创建用户界面的编码库。 虽然Font Awesome团队制作了一个React组件来促进集成，但仍需要了解一些有关Font Awesome 5及其结构的基本知识。 在本教程中，您将探索如何使用React Font Awesome组件。

先决条件 (Prerequisites)

No coding is required for this tutorial, but if you are interested in experimenting with some of the examples you will need the following:

本教程不需要编码，但是如果您有兴趣尝试一些示例，则需要满足以下条件：

• Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.

  Node.js在本地安装，您可以按照如何安装Node.js和创建本地开发环境进行操作 。

• Create React App, which you can do by following How To Set Up A React Project.

  创建React应用程序 ，您可以按照如何设置React项目来完成 。

第1步—使用真棒字体 (Step 1 — Using Font Awesome)

The Font Awesome team created a React component so you can use the two together. With this library, you can follow the tutorial after you select your icon.

Font Awesome团队创建了一个React组件，因此您可以将两者一起使用。 使用此库，您可以在选择图标后按照本教程进行操作。

In this example, we’ll use the home icon and do everything in the App.js file:

在此示例中，我们将使用home图标并在App.js文件中执行所有操作：

src/App.js

src / App.js

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

Your app now has a small home icon. You’ll notice that this code only selects the home icon so that only one icon is added to our bundle size.

您的应用程序现在带有一个小主页图标。 您会注意到，此代码仅选择home图标，因此我们的捆绑包尺寸仅添加了一个图标。

Now, Font Awesome will make sure that this component will replace itself with the SVG version of that icon once this component is mounted.

现在，Font Awesome将确保在安装该组件后，将该组件替换为该图标的SVG版本。

第2步-选择图标 (Step 2 — Choosing Icons)

Before installing and using the icons, it’s important to know how the Font Awesome libraries are structured. Since there are many icons, the team decided to split them up into multiple packages.

在安装和使用图标之前，了解Font Awesome库的结构非常重要。 由于图标很多，因此团队决定将它们分成多个包。

When picking and choosing which icons you want, it’s recommend to visit the Font Awesome icons page to explore your options. You will see different filters to choose from along the left side of the page. These filters are very important because they will indicate what package to import your icon from.

选择并选择所需的图标时，建议访问“ 真棒字体”图标页面以浏览选项。 您会在页面左侧看到不同的过滤器供您选择。 这些过滤器非常重要，因为它们将指示从中导入图标的软件包。

In the example above, we pulled the home icon out of the @fortawesome/free-solid-svg-icons package.

在上面的示例中，我们从@fortawesome/free-solid-svg-icons包中拉出了home图标。

确定图标属于哪个包 (Determining which Package an Icon Belongs To)

You can figure out which package an icon belongs to by reviewing the filters on the left. You can also click into an icon and see the package it belongs to.

您可以通过查看左侧的过滤器来确定图标属于哪个包。 您也可以单击一个图标，查看其所属的软件包。

Once you know which package a font belongs to, it’s important to remember the three-letter shorthand for that package:

一旦知道了字体属于哪个程序包，记住该程序包的三个字母的简写就很重要：

• Solid Style - fas

  实体风格fas

• Regular Style - far

  常规风格- far

• Light Style - fal

  轻型fal

• Duotone Style - fad

  双色调风格- fad

You can search for a specific type from the icons page:

您可以从图标页面搜索特定类型：

使用特定程序包中的图标 (Using Icons from Specific Packages)

If you browse the Font Awesome icons page, you’ll notice that there are usually multiple versions of the same icon. For example, let’s take a look at the boxing-glove icon:

如果浏览Font Awesome图标页面 ，您会注意到同一图标通常有多个版本。 例如，让我们看一下boxing-glove图标：

In order to use a specific icon, you will need to adjust <FontAwesomeIcon>. Following are multiple types of the same icon from different packages. These include three-letter shorthands discussed earlier.

为了使用特定的图标，您将需要调整<FontAwesomeIcon> 。 以下是来自不同软件包的同一图标的多种类型。 其中包括前面讨论的三字母速记。

Note: The following examples won’t work until we build an icon library in a few sections.

注意：以下示例只有在我们分成几节来构建图标库后才能起作用。

Here is an example of the solid version:

这是固定版本的示例：

<FontAwesomeIcon icon={['fas', 'code']} />

This defaults to solid version if a type is not specified:

如果未指定类型，则默认为实体版本：

<FontAwesomeIcon icon={faCode} />

And the light version using fal:

以及使用fal的轻量版本：

<FontAwesomeIcon icon={['fal', 'code']} />;

We had to switch our icon prop to be an array instead of a simple string.

我们必须将icon道具切换为数组而不是简单的字符串。

第3步—安装真棒字体 (Step 3 — Installing Font Awesome)

Since there are multiple versions of an icon, multiple packages, and free/pro packages, installing them all involves more than one npm package. You may need to install multiples and then choose the icons you want.

由于图标有多个版本，多个软件包和免费/专业软件包，因此安装它们都涉及多个npm软件包。 您可能需要安装多个图标，然后选择所需的图标。

For this article, we’ll install everything so we can demonstrate how to install multiple packages.

对于本文，我们将安装所有内容，以便我们演示如何安装多个软件包。

Run the following command to install the base packages:

运行以下命令以安装基本软件包：

• npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome
  npm我-S @ fortawesome / fontawesome-svg-core @ fortawesome / react-fontawesome

Run the following commands to install the regular icons:

运行以下命令以安装常规图标：

• # regular icons
  ＃常规图标
• npm i -S @fortawesome/free-regular-svg-icons
  npm我-S @ fortawesome / free-regular-svg-icons
• npm i -S @fortawesome/pro-regular-svg-icons
  npm我-S @ fortawesome / pro-regular-svg-icons

These will install the solid icons:

这些将安装实心图标：

• # solid icons
  ＃实心图标
• npm i -S @fortawesome/free-solid-svg-icons
  npm我-S @ fortawesome / free-solid-svg-icons
• npm i -S @fortawesome/pro-solid-svg-icons
  npm我-S @ fortawesome / pro-solid-svg-icons

Use this command for light icons:

使用此命令显示灯光图标：

• # light icons
  ＃灯光图标
• npm i -S @fortawesome/pro-light-svg-icons
  npm我-S @ fortawesome / pro-light-svg-icons

This will install duotone icons:

这将安装双色调图标：

• # duotone icons
  ＃双色调图标
• npm i -S @fortawesome/pro-duotone-svg-icons
  npm我-S @ fortawesome / pro-duotone-svg-icons

Finally, this will install brand icons:

最后，这将安装品牌图标：

• # brand icons
  ＃品牌图标
• npm i -S @fortawesome/free-brands-svg-icons
  npm i -S @ fortawesome / free-brands-svg-icons

Or, if you prefer to get them all installed in one go, you can use this command to install the free icon sets:

或者，如果您希望一次性全部安装它们，则可以使用以下命令来安装免费的图标集：

• npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
  npm i -S @ fortawesome / fontawesome-svg-core @ fortawesome / react-fontawesome @ fortawesome / free-regular-svg-icons @ fortawesome / free-solid-svg-icons @ fortawesome / free-brands-svg-icons

If you have a pro account with Font Awesome, you can use the following to install all of the icons:

如果您拥有Font Awesome的专业人士帐户，则可以使用以下方法安装所有图标：

• npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons
  npm我-S @ fortawesome / fontawesome-svg-core @ fortawesome / react-fontawesome @ fortawesome / free-regular-svg-icons @ fortawesome / pro-regular-svg-icons @ fortawesome / free-solid-svg-icons @fortawesome / pro-solid-svg-icons @ fortawesome / pro-light-svg-icons @ fortawesome / pro-duotone-svg-icons @ fortawesome / free-brands-svg-icons

You’ve installed the packages but haven’t yet used them in your application or added them to our app bundles yet. Let’s look at how you can do that in the next step.

您已经安装了软件包，但尚未在您的应用程序中使用它们或将它们添加到我们的应用程序捆绑包中。 让我们看看如何在下一步中做到这一点。

第4步-创建图标库 (Step 4 — Creating an Icon Library)

It can be tedious to import the icon you want into multiple files. Let’s say you use the Twitter logo in several places, you don’t want to have to write that multiple times.

将所需的图标导入多个文件可能很繁琐。 假设您在多个地方使用了Twitter徽标，而您又不想多次写下该徽标。

To import everything in one place, instead of importing each icon into each separate file, we’ll create a Font Awesome library.

为了将所有内容都导入一个地方，而不是将每个图标导入每个单独的文件中，我们将创建一个Font Awesome库 。

Let’s create fontawesome.js in the src folder and then import that into index.js. Feel free to add this file wherever as long as the components you want to use the icons in have access (are child components). You could even do this right in your index.js or App.js. However, it can be better to move this out to a separate file since it can get large:

让我们在src文件夹中创建fontawesome.js ，然后将其导入index.js 。 只要您要使用图标的组件具有访问权限(子组件)，就可以随时添加此文件。 您甚至可以在index.js或App.js执行此App.js 。 但是，最好将其移到一个单独的文件中，因为它可能会变得很大：

src/fontawesome.js

src / fontawesome.js

// import the library
import { library } from '@fortawesome/fontawesome-svg-core';

// import your icons
import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';

library.add(
  faMoneyBill,
  faCode,
  faHighlighter
  // more icons go here
);

If you did this in its own file, then you’ll need to import into index.js:

如果您在自己的文件中执行此操作，则需要导入index.js ：

src/index.js

src / index.js

import React from 'react';
import { render } from 'react-dom';

// import your fontawesome library
import './fontawesome';

render(<App />, document.getElementById('root'));

导入整个图标包 (Importing an Entire Icon Package)

It isn’t recommended to import an entire package because you’re importing every single icon into your app which could cause a large bundle size. If you do need to important an entire package, you certainly can.

不建议导入整个程序包，因为您会将每个单独的图标导入应用程序中，这可能会导致较大的文件包大小。 如果您确实需要整个软件包的重要性，那么您肯定可以。

In this example, let’s say you wanted all the brand icons in @fortawesome/free-brands-svg-icons. You would use the following to import the entire package:

在此示例中，假设您想要@fortawesome/free-brands-svg-icons所有品牌@fortawesome/free-brands-svg-icons 。 您将使用以下命令导入整个程序包：

src/fontawesome.js

src / fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);

fab represents the entire brand icon package.

fab代表整个品牌图标包。

分别导入图标 (Importing Icons Individually)

The recommended way to use Font Awesome icons is to import them one by one so that your final bundle sizes are as small as possible, as you will only import what you need.

建议使用“真棒字体”图标的方法是逐一导入它们，以使最终的捆绑包尺寸尽可能小，因为您只会导入所需的东西。

You can create a library from multiple icons from the different packages like so:

您可以使用不同包中的多个图标创建一个库，如下所示：

src/fontawesome.js

src / fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core';

import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
import { faImages } from '@fortawesome/pro-solid-svg-icons';
import {
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
} from '@fortawesome/free-brands-svg-icons';

library.add(
  faUserGraduate,
  faImages,
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
);

从多种样式导入相同的图标 (Importing the Same Icon from Multiple Styles)

If you want all the types of boxing-glove for the fal, far, and fas packages, you can import them all as a different name and then add them.

如果要为fal ， far和fas软件包提供所有类型的boxing-glove ，可以将它们全部导入为不同的名称，然后添加它们。

src/fontawesome.js

src / fontawesome.js

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
import {
  faBoxingGlove as faBoxingGloveRegular
} from '@fortawesome/pro-regular-svg-icons';
import {
  faBoxingGlove as faBoxingGloveSolid
} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faBoxingGlove,
    faBoxingGloveRegular,
    faBoxingGloveSolid
);

You can then use them by implementing the different prefixes:

然后，您可以通过实现不同的前缀来使用它们：

<FontAwesomeIcon icon={['fal', 'boxing-glove']} />
<FontAwesomeIcon icon={['far', 'boxing-glove']} />
<FontAwesomeIcon icon={['fas', 'boxing-glove']} />

步骤5 —使用图标 (Step 5 — Using Icons)

Now that you have installed what you need and have added your icons to your Font Awesome library, you are ready to use them and assign sizes. In this tutorial, we’ll use the light (fal) package.

现在，您已经安装了所需的东西，并将图标添加到Font Awesome库中，可以使用它们并分配大小了。 在本教程中，我们将使用light( fal )包。

This first example will use the normal size:

第一个示例将使用正常大小：

<FontAwesomeIcon icon={['fal', 'code']} />

The second example can use named sizing, which uses abbreviations for small (sm), medium (md), large (lg), and extra-large (xl):

第二个示例可以使用命名的sizing ，它对小( sm )，中( md )，大( lg )和超大( xl )使用缩写：

<FontAwesomeIcon icon={['fal', 'code']} size="sm" />
<FontAwesomeIcon icon={['fal', 'code']} size="md" />
<FontAwesomeIcon icon={['fal', 'code']} size="lg" />
<FontAwesomeIcon icon={['fal', 'code']} size="xl" />

The third option is to use numbered sizing which can go up to 6:

第三种选择是使用编号的大小，最多可以为6 ：

<FontAwesomeIcon icon={['fal', 'code']} size="2x" />
<FontAwesomeIcon icon={['fal', 'code']} size="3x" />
<FontAwesomeIcon icon={['fal', 'code']} size="4x" />
<FontAwesomeIcon icon={['fal', 'code']} size="5x" />
<FontAwesomeIcon icon={['fal', 'code']} size="6x" />

When using numbered sizing, you can also use decimals to find the perfect size:

使用数字大小调整时，您还可以使用小数来找到理想的大小：

<FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />

Font Awesome styles the SVGs it uses by taking the text-color of the CSS. If you were to place a <p> tag where this icon were to go, the color of the paragraph would be the color of the icon:

Font Awesome通过使用CSS的文本颜色来为其使用的SVG设置样式。 如果要在要放置此图标的位置放置<p>标记，则段落的颜色将是图标的颜色：

<FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />

Font Awesome also has a power transforms feature where you can string together different transforms:

Font Awesome还具有强大的变换功能，您可以将不同的变换串在一起：

<FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />

You can use any of the transforms found on the Font Awesome site. You can use this to move icons up, down, left, or right to get the positioning perfect next to text or inside of buttons.

您可以使用在Font Awesome网站上找到的任何转换 。 您可以使用此按钮上下，左右移动图标，以使文本或按钮内部的定位完美。

固定宽度图标 (Fixed Width Icons)

When using icons in a spot where they all need to be the same width and uniform, Font Awesome lets us use the fixedWidth prop. For instance, let’s say that you need fixed widths for your navigation dropdown:

在需要全部具有相同宽度和统一性的位置使用图标时，Font Awesome让我们使用fixedWidth道具。 例如，假设您的导航下拉列表需要固定宽度：

<FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />

旋转图标 (Spinning Icons)

Spinning is useful to implement on form buttons when a form is processing. You can use the spinner icon to make a nice loading effect:

处理表单时，旋转对于在表单按钮上实现很有用。 您可以使用微调器图标来获得不错的加载效果：

<FontAwesomeIcon icon={['fal', 'spinner']} spin />

You can use the spin prop on anything!

您可以在任何东西上使用spin道具！

<FontAwesomeIcon icon={['fal', 'code']} spin />

高级：遮罩图标 (Advanced: Masking Icons)

Font Awesome allows you to combine two icons to make effects with masking. You define your normal icon and then use the mask prop to define a second icon to lay on top. The first icon will be constrained within the masking icon.

Font Awesome(字体真棒)使您可以将两个图标组合在一起以产生具有遮罩的效果。 您定义普通图标，然后使用mask道具定义第二个图标放在顶部。 第一个图标将被限制在蒙版图标中。

In this example, we created tag filters using masking:

在此示例中，我们使用掩码创建了标签过滤器：

<FontAwesomeIcon
  icon={['fab', 'javascript']}
  mask={['fas', 'circle']}
  transform="grow-7 left-1.5 up-2.2"
  fixedWidth
/>

Notice how you can chain together multiple transform props to move the inner icon to fit inside the masking icon.

请注意，如何将多个transform道具链接在一起，以移动内部图标使其适合蒙版图标。

We even colorize and change out the background logo with Font Awesome:

我们甚至使用Font Awesome上色并更改背景徽标：

第6步—在React之外使用react-fontawesome和图标 (Step 6 — Using react-fontawesome and Icons Outside of React)

If your entire site isn’t a single-page application (SPA), and instead you have a traditional site and have added React on top. To avoid importing the main SVG/JS library and also the react-fontawesome library, Font Awesome has created a way to use the React libraries to watch for icons outside of React components.

如果您的整个网站不是单页应用程序(SPA)，而是您有一个传统网站，并在顶部添加了React 。 为了避免导入主要的SVG / JS库以及react-fontawesome库，Font Awesome创建了一种使用React库监视React组件外部图标的方法。

If you have any <i class="fas fa-stroopwafel"></i>, we can tell Font Awesome to watch and update those using the following:

如果您有任何<i class="fas fa-stroopwafel"></i> ，我们可以告诉Font Awesome观看并使用以下内容进行更新：

import { dom } from '@fortawesome/fontawesome-svg-core'

dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver

MutationObserver’s are a web technology that allow us to watch the DOM for changes performantly. Find out more about this technique on the React Font Awesome docs.

MutationObserver是一项网络技术，可让我们观察DOM的性能变化。 在React Font Awesome docs上找到有关此技术的更多信息。

结论 (Conclusion)

Using Font Awesome and React together is a great pairing, but creates the need to use multiple packages and consider different combinations. In this tutorial you explored some of the ways you can use Font Awesome and React together.

结合使用Font Awesome和React是一个很好的配对，但是需要使用多个软件包并考虑不同的组合。 在本教程中，您探索了一些可以一起使用Font Awesome和React的方法。

翻译自: https://www.digitalocean.com/community/tutorials/how-to-use-font-awesome-5-with-react

react awesome