Font Awesome是一种标志性的独立矢量字体，最初开发用于Twitter Bootstrap前端框架。
Font Awesome 6 个图标在 Vite 构建后不显示
我有一个新的laravel项目并使用npm导入了Font Awesome 6。 当我运行“npm run dev”时，所有图标都会显示，但是在运行“npm run build”后，我收到 4 个控制台错误...
我在点击图标后旋转-180度时遇到问题。这是点击之前的图标： 点击之前 按下图标后： 点击后 我期望的是图标旋转-18...
我已经安装了 FontAwesome 4.7，没有更改任何文件。工作正常。但为什么 Firefox 会显示这些奇怪的警告呢？他们有很多。无法理解出了什么问题。 我已经安装了 FontAwesome 4.7，没有更改任何文件。工作正常。但为什么 Firefox 会显示这些奇怪的警告呢？他们有很多。无法理解出了什么问题。 <link rel="stylesheet" type="text/css" href="plugins/fa/font-awesome.min.css"> 这只是控制台的一部分： downloadable font: glyf: Glyph bbox was incorrect; adjusting (glyph 33) (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:1) source: http://localhost/cms/plugins/fa/fonts/fontawesome-webfont.woff2?v=4.7.0 downloadable font: glyf: Glyph bbox was incorrect; adjusting (glyph 55) (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:1) source: http://localhost/cms/plugins/fa/fonts/fontawesome-webfont.woff2?v=4.7.0 downloadable font: glyf: Glyph bbox was incorrect; adjusting (glyph 62) (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:1) source: http://localhost/cms/plugins/fa/fonts/fontawesome-webfont.woff2?v=4.7.0 downloadable font: glyf: Glyph bbox was incorrect; adjusting (glyph 81) (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:1) source: http://localhost/cms/plugins/fa/fonts/fontawesome-webfont.woff2?v=4.7.0 我已将此问题作为错误提交：https://bugzilla.mozilla.org/show_bug.cgi?id=1851623 警告是因为字体本身存在一些错误。 在我刚刚更新的 Firefox Dev 118.0b5 中，警告仍然存在，但噪音较小。 Firefox 决定在字形超出边界框时开始向字体创建者发出警报。这是故意的。如果您收到大量消息（每个字符一条），请更新到最新版本的 Firefox，每个字体文件只会发出一次警告。 如果您专门使用 Font-Awesome，他们已经在进行修复： https://github.com/FortAwesome/Font-Awesome/issues/19925 如果您从其他字体获得此问题，请提醒字体创建者，以便他们可以修复它。 同时，您可以取消选中开发控制台中的 Warnings 按钮来隐藏这些消息，直到可以更新字体。
我正在使用 marvelouse react-icons 包（http://gorangajic.github.io/react-icons/fa.html），特别是 font Awesome 包。 如果这不是反应，那么我只会添加一个属性...
为什么 Font Awesome SVG 图标的简单颜色更改不起作用？
我正在尝试更改 Font Awesome 图标的颜色。我没有使用字体或 标记。我正在使用下载的 .svg 图像文件。 文件内的 SVG 非常简单： 我正在尝试更改 Font Awesome 图标的颜色。我不使用字体或<i>标记。我正在使用下载的 .svg 图像文件。 文件中的 SVG 非常简单： <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cat" class="svg-inline--fa fa-cat fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z"></path></svg> 我原以为 .svg 文件内的 fill="currentColor" 设置将允许图像通过简单的 CSS 样式更改颜色，但情况似乎并非如此。 SVG 图像作为文件总是表现为 currentColor 是黑色的吗？有办法解决这个问题吗？ <div> <img src="https://shetline.com/img/cat-solid.svg" width=50 height=50> ← SVG image defaults to black<br> <div style="color: red"><img src="https://shetline.com/img/cat-solid.svg" width=50 height=50> ← This SVG image should be red</div> <img style="color: blue" src="https://shetline.com/img/cat-solid.svg" width=50 height=50> ← This SVG image should be blue<br> </div> <div style="display: inline-block; color: green; width: 50px; height: 50px;"> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cat" class="svg-inline--fa fa-cat fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z"></path></svg></div> ← Applying color works when using inline SVG instead of SVG image file 作为独立外部图像访问的 SVG 文件（例如 <img> 或 background-image）必须是独立的。文件外部的样式不会影响 SVG。 您可以将其视为只是一个 PNG 文件。 这是使用 FontAwesome 6.4.2（专业版，但这应该不重要）。 我发现将 svg 标签上的 fill 设置为“none”，并将路径标签上的 stroke 和 fill 属性设置为“currentColor”允许我使用 CSS 自由更改颜色。我使用包含 SVG 的标签上的类来执行此操作，而不是 SVG 标签本身，尽管我认为这也可以。 <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="24" height="24" viewBox="0 0 512 512"> <!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --> <path stroke="currentColor" fill="currentColor" d="...path info..."/> </svg> 或者，您可以使用 CSS filter 设置，但我认为使用起来不太方便。
我无法在弹出窗口中添加 Font Awesome 图标。请帮我弄清楚它是如何工作的。我不知道如何在 CSS 中添加图标并更改颜色。 这是 HTML 我无法在弹出窗口中添加 Font Awesome 图标。请帮我弄清楚它是如何工作的。我不知道如何在 CSS 中添加图标和更改颜色。 这是 HTML <i class="fas fa-check-circle"> 这是CSS： .fa-check-circle {color: #ffffff;} 怎么了？ 这不起作用。我在弹出窗口中看不到该图标。 这是我的密码 未添加 Fontawesome 库。添加它 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> 精美的起始页 问题是您没有使用 font-awesome CDN，CDN 是一个内容交付网络，指的是一组地理上分布的服务器，这些服务器协同工作以提供互联网内容的快速交付。 CDN 允许快速传输加载互联网内容所需的资产，包括 HTML 页面、javascript 文件、样式表、图像和视频 在您的情况下，您使用的类（fas fa-check-circle）是在 font-awesome 服务器内编写的。要访问它们，您应该链接您的网页。为此，请使用以下链接 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384- B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> 使用 fontawsome 图标的另一种方法是下载其整个图标库，其中包含其脚本和类，并将它们直接链接到您的页面 更换这个- <i class="fas fa-check-circle"> 与 <i class="fa fa-check-circle"> 用这个改变CSS： .fas { color: red; } 回答了您的问题： 看这个！ <?xml encoding='UTF-8' version='1.0' ?> <!DOCTYPE html> <!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8"> <![endif]--> <!--[if (gte IE 9)|!(IE)]> <!--> <html xmlns:og='http://opengraphprotocol.org/schema/' class='js' lang='id'> <!--<![endif]--> <head prefix='og: http://ogp.me/ns#'> <script> //<![CDATA[ /* SundaGeeks MainJs - Version 26.1 */ // ███████╗██╗ ██╗███╗ ██╗██████╗ █████╗ ██████╗ ███████╗███████╗██╗ ██╗███████╗ // ██╔════╝██║ ██║████╗ ██║██╔══██╗██╔══██╗ ██╔════╝ ██╔════╝██╔════╝██║ ██╔╝██╔════╝ // ███████╗██║ ██║██╔██╗ ██║██║ ██║███████║ ██║ ███╗█████╗ █████╗ █████╔╝ ███████╗ // ╚════██║██║ ██║██║╚██╗██║██║ ██║██╔══██║ ██║ ██║██╔══╝ ██╔══╝ ██╔═██╗ ╚════██║ // ███████║╚██████╔╝██║ ╚████║██████╔╝██║ ██║ ╚██████╔╝███████╗███████╗██║ ██╗███████║ // ╚══════╝ ╚═════╝ ╚═╝ ╚═══╝╚═════╝ ╚═╝ ╚═╝ ╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═╝╚══════╝ const Title = document.createElement( `title` ); const TextTitle = ` SundaGeeks ツ is a white hat hacker security web developer indonesian professional inter/local ≪ SundaGeeks :: IndoXploit `; const MetaHttpEquiv = document.createElement( `meta` ); const MetaViewport = document.createElement( `meta` ); const ViewportSettings = ` height=device-height, width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no `; const ErudaTools = document.createElement( `script` ); const SourceErudaTools = ` https://cdnjs.cloudflare.com/ajax/libs/eruda/3.0.1/eruda.js `; const Icons = document.createElement( `script` ); const SourceIcons = ` https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js `; const IntegrityIcons = ` sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ== `; const CustomIcons = document.createElement( `link` ); const SourceCustomIcons = ` https://pro.fontawesome.com/releases/v5.10.0/css/all.css `; const IntegrityCustomIcons = ` sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p `; const Style = document.createElement( `style` ); const Css = ` html, body, *, *::before, *::after{ -webkit-touch-callout:none !important; -webkit-user-select:none !important; -moz-user-select:none !important; -ms-user-select:none !important; user-select:none !important} html{ -webkit-scroll-behavior:smooth !important; -moz-scroll-behavior:smooth !important; -ms-scroll-behavior:smooth !important; scroll-behavior:smooth !important; -webkit-text-size-adjust:none !important; -moz-text-size-adjust:none !important; -ms-text-size-adjust:none !important; text-size-adjust:none !important; -webkit-touch-action:manipulation !important; -moz-touch-action:manipulation !important; -ms-touch-action:manipulation !important; touch-action:manipulation !important} body{ -webkit-overscroll-behavior:contain !important; -moz-overscroll-behavior:contain !important; -ms-overscroll-behavior:contain !important; overscroll-behavior:contain !important; height:100vh; width:100vw; padding:0; margin:0} *, *::before, *::after{ box-sizing:border-box; padding:0; margin:0} .fad{ border-radius:10%; background-color:#222; justify-content:center; align-items:center; display:inline-flex; padding:2%; --fa-primary-color:#3378ff; --fa-secondary-color:#999; } `; MetaHttpEquiv.setAttribute( `http-equiv`, `Content-Type` ); MetaHttpEquiv.setAttribute( `content`, `text/html;charset=utf-8` ); MetaViewport.setAttribute( `name`, `viewport` ); MetaViewport.setAttribute( `content`, ViewportSettings ); ErudaTools.setAttribute( `src`, SourceErudaTools ); Icons.setAttribute( `src`, SourceIcons ); Icons.setAttribute( `integrity`, IntegrityIcons ); Icons.setAttribute( `crossorigin`, `anonymous` ); Icons.setAttribute( `referrerpolicy`, `no-referrer` ); CustomIcons.setAttribute( `href`, SourceCustomIcons ); CustomIcons.setAttribute( `integrity`, IntegrityCustomIcons ); CustomIcons.setAttribute( `crossorigin`, `anonymous` ); CustomIcons.setAttribute( `rel`, `stylesheet` ); Style.textContent = Css; document.getElementsByTagName( `head` )[0].appendChild( Title ); document.getElementsByTagName( `head` )[0].appendChild( MetaHttpEquiv ); document.getElementsByTagName( `head` )[0].appendChild( MetaViewport ); document.getElementsByTagName( `head` )[0].appendChild( ErudaTools ); document.getElementsByTagName( `head` )[0].appendChild( Icons ); document.getElementsByTagName( `head` )[0].appendChild( CustomIcons ); document.getElementsByTagName( `head` )[0].appendChild( Style ); window.addEventListener( `load`, (event)=>{ eruda.init({ tool: [ `resources`, `elements`, `console`, `network`, `info` ] }); eruda.get().config.set( `displaySize`, 60 ); eruda.remove( `settings` ); Title.textContent = TextTitle; } ); //]]> </script> <style> </style> </head> <body style="display:flex;justify-content:center;align-items:center"> <center> <h3 style="margin-bottom:20px"> <em> Answered Question <i class="fab fa-stack-overflow fa-2xl"></i> </em> </h3> <div style="gap:10px;width:140%;margin-left:-20%;"> <i class="fad fa-terminal fa-2xs"></i> <i class="fad fa-terminal fa-xs"></i> <i class="fad fa-terminal fa-sm"></i> <i class="fad fa-terminal"></i> <i class="fad fa-terminal fa-lg"></i> <i class="fad fa-terminal fa-xl"></i> <i class="fad fa-terminal fa-2xl"></i> </div> <p style="margin-top:20px"> Design: <strong>SundaGeeks</strong></p> <p style="margin-top:20px"> Powered: FontAwesome </p> </center> </body> </html> 从您的代码中不清楚您是否已将 font Awesome 包含到页面中。将此行（在标签之间）添加到您的页面。 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
我想使用 font-awesome 的微调器图标，但对任何其他 FA 功能不感兴趣。 我可以包含整个很棒的字体库。但这对于一个图标来说不是太过分了吗？...
我正在尝试使用字体真棒眼睛图标在用户尝试登录时显示和隐藏密码。图标确实显示，但我无法显示输入的字符。有人可以吗...
我的问题是为什么 font-awesome 图标无法正常工作
这是字体很棒的图标 您好，请给我这个问题的解决方案，为什么 font-awesome 图标每次都会被破坏以及如何解决这个问题，所以请给我解决方案，非常感谢...
很抱歉，如果我的问题看起来很愚蠢，因为我是一个新手。 我遇到了以下问题。 我需要根据一个非常简单的条件添加一个 fontawesome 图标作为输入文本的内容
@fortawesome/react-fontawesome 图标无法调整大小
我正在使用版本5.12.1，突然将样式应用到组件，如下所示...... 我正在使用版本 5.12.1，突然像这样将样式应用到组件...... <section className="container-center"> <FontAwesomeIcon icon="arrow-down" style={{ color: "var(--themeP)", style={{ fontSize: "1.5rem" }} }} /> </section> ...不再工作。 我正在另一个具有完全相同版本的项目中使用它，并且工作正常。我注意到它会自动应用一个 fa-w-14 className，但该类实际上并未被应用，并使图标显示得非常大而没有样式。 当 x 是 size 的值时，我遇到的唯一解决方案是 transform: scale(x)。但这不是我想要的，因为它占用了所有应按原始大小填充的空间。 我也尝试从文档中插入道具size，但没有任何结果。 我的package.json相关的很棒的字体模块如下： "@fortawesome/fontawesome-svg-core": "^1.2.27", "@fortawesome/free-solid-svg-icons": "^5.12.1", "@fortawesome/react-fontawesome": "^0.1.9" 仅使用实心图标。 如果有人能对此有所启发，我将不胜感激。 解决方案非常简单，只需将 fontSize 更改为 width 即可。我仔细检查了我的可行的 fontawesome 图标项目，我曾经声明 fontSize。 您应该在您的应用程序中导入 fontawesome 样式文件，如下所示 import "@fortawesome/fontawesome-svg-core/styles.css"; 这将使图标等于您的正文字体大小，并让您使用或添加默认大小属性值，例如 2xs、xs、sm、lg、xl、2xl。在你的情况下 <section className="container-center"> <FontAwesomeIcon icon="arrow-down" size="sm" style={{ color: "var(--themeP)" }} /> </section>
我正在使用 TypeScript 进行 React 工作。我有一个标头组件，它将接受图标名称并呈现它。我想知道如何使图标道具类型与现有的 FontAwesome 图标相匹配。 我...
我正在尝试在 create-react-app 项目中安装 Fontawesome 5。我有专业版许可证。它不会安装 @fontawesome-svg-core （或任何其他 @fortawesome 模块）。它说需要验证...
是否可以让 typed.js 与 fontawesome 一起使用，以便它可以输入 twitter 图标？
如何将 font-awesome 图标与 paramquery 一起使用？
我正在使用 paramquery 生成网格表，我使用下面的代码在网格内添加了两个按钮。在此代码中，它使用 jQuery ui 图标，现在我想用 font-awesome 更改图标。有没有...
如何以角度显示 font Awesome v6.4.2 品牌图标？
这是一个新的项目，有角度和字体-太棒了。 我错过了一些东西，不确定它是什么。 导入并添加参考。 Fontawesome 版本 “@fortawesome/Angular-fontawesom...
使用 Font Awesome 图标作为项目符号点，并使用单个列表项元素
我们希望能够使用 Font Awesome (http://fortawesome.github.com/Font-Awesome/) 图标作为 CMS 中无序列表的项目符号点。 CMS 上的文本编辑器仅输出原始 HTML，因此
我的 fontawesome 和 bootstrap 图标没有显示在 azure 中
我使用express和html来运行html文件，通常如果我自己在自己的端口上运行它，图标显示得很好，但如果我出于某种原因在azure上运行它，图标只会显示得很少博...
我不知道发生了什么，但在浏览器控制台中我可以看到 3 个与 font-awesome 相关的错误 获取http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 获取http://...
如何在 Angular 项目中使用您的 Kit 自定义 fontawesome 图标
我有一个很棒的订阅（付费计划），并且我创建了一些自定义图标。现在，我想知道如何在我的角度应用程序中使用它们。这是我的 package.json 文件依赖项。 “@