1401 React JS 和 Font Awesome

2025年1月7日 | 阅读 6 分钟

Font Awesome 是一个以符号格式显示信息和消息的库。我们可以添加一个优秀的字体库，并以各种方式显示字体或符号。在 React JS 中，有两种使用 font awesome 的方法。

使用带有 html 页面的在线链接
使用 react.js 安装

使用带有 HTML 页面的在线链接

html 页面使用带有链接的表单、元素、标签和字体。我们可以使用 React 的在线链接与 font excellent 在线链接。

如何使用 Font Awesome

以下步骤用于在 React.js 中添加 font awesome。

步骤 1

创建一个 HTML 页面，并在 head 部分包含 react JS 在线链接。

<!DOCTYPE html>
<html>
<head>
<script src = "https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src = "https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
</head>
</html>

步骤 2

在 head 部分使用 Font Awesome 的在线链接，并包含所需的版本。

<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

步骤 3

创建一个 react 类并显示输出元素。使用 font awsomes 链接，并使用 <i></i> 标签及其大小。

Class HelloMessage extends React.Component {
// function call name and id for message
render() {
return <div>
Hello Student <br/>
<i class = "fa fa-lg fa-address-book" aria-hidden = "true"></i>
}
}

步骤 4

在容器中显示 font awesome 的输出。

示例

以下示例显示了具有不同样式和 UI 的 font awesome。

示例 1

以下示例显示了 html 页面中带有基本符号的 font awesome。

<!DOCTYPE html>
<html>
<head>
<script src = "https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src = "https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#demo1{
background-color: lightgrey;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<b> React Getting Started with id and name </b>
<div id = "mydiv"></div>
</div>
<script type = "text/babel">
//Use class for the message
class HelloMessage extends React.Component {
// function call name and id for message
render() {
return <div>
Hello Student <br/>
<i class = "fa fa-address-book" aria-hidden = "true"></i>

Id: {this.props.id} <br/><br/>
<i class = "fa fa-address-card" aria-hidden = "true"></i>

name:{this.props.name}
</div>;
}
}
//create react root to show the message
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
// Get output and place on the container
root.render(<HelloMessage id="Javatpoint" name=" website" />);
</script>
</body>
</html>

输出

图像显示了网页上的 font awesome 符号。

示例 2

以下示例显示了 html 页面中带有基本符号的 font awesome。我们可以将 font awesome 与 form 标签一起使用。

<!DOCTYPE html>
<html>
<head>
<script src = "https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src = "https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#demo1{
background-color: lightgrey;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<b> User Form Using React Js </b>
<div id = "mydiv"></div>
</div>
<script type = "text/babel">
//Use class for the message
class HelloMessage extends React.Component {
// function call name and id for message
render() {
return <form>
<br/>
<b> Welcome User </b> <br/> <br/>
<i class = "fa fa-user-circle" aria-hidden = "true"></i>

User Name: <input type= 'text'/><br/><br/>
<i class = "fa fa-envelope" aria-hidden = "true"></i>

User Name: <input type= 'email'/><br/><br/>
<input type= 'submit'/><br/>
</form>;
}
}
//create react root to show the message
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
// Get output and place on the container
root.render(<HelloMessage id="Javatpoint" name=" website" />);
</script>
</body>
</html>

输出

图像显示了网页上的 font awesome 符号。

示例 3

以下示例显示了 html 页面中带有基本符号的 font awesome。我们可以将 font awesome 与表中的大小一起使用。

<!DOCTYPE html>
<html>
<head>
<script src = "https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src = "https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#demo1{
background-color: lightgrey;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id = "demo1">
<b> User Form Using React Js </b>
<div id = "mydiv"></div>
</div>
<script type = "text/babel">
//Use class for the message
class HelloMessage extends React.Component {
// function call name and id for message
render() {
return <table>
<tr>
<th> Sr No </th>
<th> Name </th>
<th> Symbol </th>
</tr>
<tr>
<td> 1 </td>
<td> Home </td>
<td> <i class = "fa fa-sm fa-home" aria-hidden = "true"></i> </td>
</tr>
<tr>
<td> 2  </td>
<td> Email </td>
<td> <i class = "fa fa-md fa-envelope" aria-hidden = "true"></i>
</td>
</tr>
<tr>
<td> 3  </td>
<td> User </td>
<td> <i class = "fa fa-lg fa-user-circle" aria-hidden = "true"></i>
</td>
</tr>
</table>
}
}
//Create react root to show the message
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
// Get output and place on the container
root.render(<HelloMessage id="Javatpoint" name=" website" />);
</script>
</body>
</html>

输出

图像显示了网页上的 font awesome 符号。

使用 React.JS 安装

React.js 需要使用 node js 包来安装 font awesome 库。我们需要在本地安装 node js 包，并设置带有 font awesome 的 react 的要求。创建一个 React 应用程序并导入一个带有符号包的文件。

如何在 React.JS 中使用 Font Awesome

以下步骤用于使用 Font Awesome。

步骤 1：使用 font awesome

font awesome 创建 React Js 组件以同时运行。我们可以导入 fontawesome 图标和所需的图标包。

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

步骤 2：选择图标

我们可以选择所需的图标并将其与包一起导入。创建一个 awesome 库并在 React JS 中使用它。

当我们知道包和字体时，请记住该包的三个字母缩写

Solid Font Style - fas
Regular Font Style - far
Light Font Style - fal
Duotone Font Style - fad

步骤 3：在 React JS 中安装 Font Awesome 库。

可以通过 React 导入库或包以支持所需的字体。

步骤 4：创建或导入字体库并导入它。

步骤 5：在标签中使用所需的图标。

我们可以通过以下方式使用字体样式并显示信息字体。

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

示例

以下示例显示了具有不同样式和大小的 font awesome。我们可以使用 react 来处理不同类型的符号字体和消息。

示例 1

以下示例显示了带有基本符号和信息的 font awesome。使用导入包，我们可以在 React JS 中同时使用两个 font awesome。

import React from "react";
import { render } from "react-dom";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHome } from "@fortawesome/free-solid-svg-icons";
export default function App() {
return (
<div className = "App">
<div>
<br/> <br/>
<FontAwesomeIcon icon = {faHome } />
Welcome To javatpoint Home
</div>
</div>
);
}

输出

图像显示了网页上的 font awesome 符号。

示例 2

以下示例显示了带有基本符号和信息的 font awesome。使用导入包，我们可以在 React JS 中同时使用两个 font awesome。

import React from "react";
import { render } from "react-dom";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMugHot, faHome } from "@fortawesome/free-solid-svg-icons";
export default function App() {
return (
<div className = "App">
<div>
<FontAwesomeIcon icon = {faMugHot} />
Welcome To React Js!
<br/> <br/>
<FontAwesomeIcon icon = {faHome } />
The javatpoint Home
</div>
</div>
);
}

输出

图像显示了网页上的 font awesome 符号。

示例 3

以下示例显示了带有基本符号和信息的 font awesome。我们可以使用比正常大小大 2 或 3 倍的不同大小。

import React from "react";
import { render } from "react-dom";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMugHot, faHome } from "@fortawesome/free-solid-svg-icons";
export default function App() {
return (
<div className = "App">
<div>
<FontAwesomeIcon icon = {faMugHot} size = {"3x"} />
Coffee Please!!
<br/> <br/>
<FontAwesomeIcon icon = {faHome } size = {"2x"} />
Welcome To React Js! The javatpoint Home!
</div>
</div>
);
}

输出

图像显示了网页上的 font awesome 符号。

结论

font Awesome 是创建有吸引力功能的重要功能。它使用 React 以符号方式定义函数名称。

下一个主题React 入门教程

← 上一个下一个 →

1401 React JS 和 Font Awesome

使用带有 HTML 页面的在线链接

如何使用 Font Awesome

示例

使用 React.JS 安装

如何在 React.JS 中使用 Font Awesome

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

1401 React JS 和 Font Awesome

使用带有 HTML 页面的在线链接

如何使用 Font Awesome

示例

使用 React.JS 安装

如何在 React.JS 中使用 Font Awesome

示例

结论

相关帖子

React 中的 HTML 评论

React 中的内联样式

React 中什么是 Dom

React JS 中的类组件

从零到英雄的完整 React JS 让你被录用

React 中的单元测试

将 ejs 转换为 React

将字符串转换为组件 React

React Axios 删除请求示例

在 React JS 中循环数组

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器