font-awesome 相关问题

使用 fa-regular 时 FontAwesome 字体粗细的问题

Chrome 115 和 117（也在 Edge 中） fa-solid 显示正常，但常规显示为正方形 这是它的样子 当尝试在 DevTool 中使用 font-weight 时，浏览器看起来无法显示......

Moodle 平台上的 TinyMce 和 Fontawesome 图标存在问题。图标不出现

长期以来，我们在 Moodle 上使用 Atto 作为文本编辑器。 在页脚上，我们使用 fontawesome 图标来表示社交媒体链接。 这是我们在 Atto 中最常使用的代码。 长期以来，我们在 Moodle 上使用 Atto 作为文本编辑器。 在页脚上，我们使用 fontawesome 图标来表示社交媒体链接。 这是我们在 Atto 中最常使用的代码。 <div style="text-align:center;"> <a href="https://www.linkedin.com" target="_blank" title="Facebook"><span class="sr-only">Linkedin</span><span class="fa-stack fa-lg"><span class="fa fa-circle fa-stack-2x"></span><span class="fa fa-linkedin fa-stack-1x fa-inverse"></span></span></a> <a href="https://twitter.com/" target="_blank" title="Twitter"><span class="sr-only">twitter</span><span class="fa-stack fa-lg"><span class="fa fa-circle fa-stack-2x"></span><span class="fa fa-twitter fa-stack-1x fa-inverse"></span></span></a> <a href="https://www.youtube.com/" target="_blank" title="Youtube"><span class="sr-only">Youtube</span><span class="fa-stack fa-lg"><span class="fa fa-circle fa-stack-2x"></span><span class="fa fa-youtube fa-stack-1x fa-inverse"></span></span></a> </div> 当我们切换到TinyMce编辑器时，代码被修改，图标不再出现。 结果代码是： <div style="text-align: center;"><a title="Twitter" href="https://twitter.com/" target="_blank" rel="noopener"><span class="sr-only">twitter</span></a> <a title="LinkedIn" href="https://www.linkedin.com/" target="_blank" rel="noopener"><span class="sr-only">linkedin</span></a> <a title="Youtube" href="https://www.youtube.com/" target="_blank" rel="noopener"><span class="sr-only">Youtube</span></a></div> 所有 fa 类都被删除，因此图标不再可见。 我应该怎么做才能避免这个问题？ 我们管理许多 Moodle 平台，Atto 编辑器很快将无法与 Moodle 兼容。 所以我确实需要找到一种在 Moodle 上通过 TinyMce 编辑器使用这个图标的方法。 谢谢您的帮助:) 最好的问候， 尝试在 Moodle 平台上通过 TinyMce 编辑器使用 Font Awesome 图标。 TinyMCE 默认删除空标签。您需要在标签内添加一些内容： <i class="fa-solid fa-cubes-stacked">< !-- SOMETHING_HERE --> </i> 同样适用于<em>： <em class="fa-regular fa-file-code"><!-- SOMETHING_HERE --></em>

社交菜单图标问题 - 添加课程时没有超链接

我正在littleseabear.com 上使用我自己的无限新闻儿童主题。 Infinity News 使用 ion 图标，并且为了使图标出现在社交菜单中，CSS 类似于： 社交图标 ul a[href*="

为什么我的字体图标没有改变大小？如何让它随着桌面尺寸的缩小而缩小？

在页脚中，我添加了一些很棒的字体链接，这些链接现在工作正常。 看看我的 CSS 代码，为什么大小没有改变？如何将其放置在页脚横幅的中间？ 我...

CSS 中使用绝对和相对位置定位元素的困难

我目前正在开发一个项目，尝试调整侧边栏中元素的位置。侧边栏包含 Font Awesome 图标和相应的文本元素，我正在尝试...

使用 Laravel 9 (Vite) 安装 font-awesome

我正在使用 Laravel 9，它不再使用 mix，但是 vite，为了捆绑资源，我也没有使用任何像 sass 或更少的预处理器，并且对它们一无所知。 每条文字都关于...

通过 GitHub 秘密中的 Dockerfile 将 Font Awesome 令牌作为构建秘密注入到 .npmrc

我们目前在应用程序中使用 Font Awesome 库来存储字体和图标。它在 .npmrc 文件中注册，如下所示： @fortawesome:registry=https://npm.fontawesome.com/ //npm。

用 svg 替换 font Awesome 图标

我想用 和 svg 替换一个很棒的字体图标。 例如，如果 css 类是 class="'fa fa-square'"，如何更改它才能使用具有相同形状的 svg 文件 square.svg？

尽管本地托管和 CORS 已修复，但 Font Awesome 图标仍不显示

我遇到了一个问题，尽管在本地托管 Font Awesome 文件，但 Font Awesome 图标没有显示在我的实时 Web 服务器上。我最初遇到了 CORS 问题，本地解决了

FontAwesome 图标在 Safari 中的位置比 Chrome 中更高

我不知道为什么会发生这种情况，但我的 FontAwesome 图标在 Safari 中出现偏移。 在 Chrome 中它们看起来像这样： 在 Safari 中，像这样： 现在，我正在使用 Foundation、React.js 和 FontAwe...

Font Awesome 6 个图标在 Vite 构建后不显示

我有一个新的laravel项目并使用npm导入了Font Awesome 6。 当我运行“npm run dev”时，所有图标都会显示，但是在运行“npm run build”后，我收到 4 个控制台错误...

在 html 和 css 中旋转图标

我在点击图标后旋转-180度时遇到问题。这是点击之前的图标： 点击之前 按下图标后： 点击后 我期望的是图标旋转-18...

安装 Font Awesome 4 后控制台出现奇怪错误

我已经安装了 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 按钮来隐藏这些消息，直到可以更新字体。

如何从react-icons包中缩放（大）字体很棒的图标

我正在使用 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">

如何仅包含部分字体-awesome

我想使用 font-awesome 的微调器图标，但对任何其他 FA 功能不感兴趣。 我可以包含整个很棒的字体库。但这对于一个图标来说不是太过分了吗？...

Vuejs FontAwesome 眼睛图标显示和隐藏密码

我正在尝试使用字体真棒眼睛图标在用户尝试登录时显示和隐藏密码。图标确实显示，但我无法显示输入的字符。有人可以吗...

我的问题是为什么 font-awesome 图标无法正常工作

这是字体很棒的图标 您好，请给我这个问题的解决方案，为什么 font-awesome 图标每次都会被破坏以及如何解决这个问题，所以请给我解决方案，非常感谢...

如何根据输入的值在html中添加fontawesome图标

很抱歉，如果我的问题看起来很愚蠢，因为我是一个新手。 我遇到了以下问题。 我需要根据一个非常简单的条件添加一个 fontawesome 图标作为输入文本的内容