文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在react中添加方框图标？

问如何在react中添加方框图标？
EN

Stack Overflow用户

提问于 2022-06-21 18:42:33

回答 1查看 455关注 0票数 0

我试图添加一个方框图标在我的反应应用程序使用下面的代码(见码箱)，但图标不会显示。

./src/App.js

import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <FontAwesomeIcon icon="fa-solid fa-home"></FontAwesomeIcon>
      <div>hello</div>
      <FontAwesomeIcon icon="fas fa-edit" />
      <div>hello</div>
      <span>
        <i class="fas fa-edit"></i>
      </span>
    </div>
  );
}

./public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />

    <script
      defer
      src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"
    ></script>
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>

  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

部分package.json

  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "6.1.1",
    "@fortawesome/free-solid-svg-icons": "6.1.1",
    "@fortawesome/react-fontawesome": "0.1.18",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-scripts": "4.0.0"
  },

javascript

reactjs

font-awesome

react-font-awesome

回答 1

Stack Overflow用户

发布于 2022-06-21 19:22:19

您可以导入图标，如：

import {faChevronDown} from '@fortawesome/free-solid-svg-icons'

<FontAwesomeIcon icon={faChevronDown} size={'xs'} />

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72705716

复制

相似问题

问如何在react中添加方框图标？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在react中添加方框图标？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在react中添加方框图标？
EN