Font Awesome是一种标志性的独立矢量字体,最初开发用于Twitter Bootstrap前端框架。
为什么 FontAwesome 建议通过 .js 脚本而不是 CDN 链接包含?
我正在寻找一个 CDN 来链接到 FontAwesome。 他们的网站提供了一个 .js 链接(而不是使用我发现的这个开源 CDN) 它是否检查链接(或者尝试搜索...
我想使用很棒的字体为我的侧边栏制作一个图标,但图标变成了正方形。 我可以使用 cdn,但我想尝试离线。我将 all.min.css 放在 public 文件夹中的 css 文件夹中 输入图像描述...
在 Blazor WebAssembly 应用程序中更新到较新版本的 Bootstrap 和 font Awesome 的最佳方法
谁能告诉我从创建项目时使用的默认版本更新到 Blazor WebAssembly 应用程序中 Bootstrap 和 font Awesome 较新版本的最佳方法?
将 SVG 与 JavaScript 结合使用比将 Web Fonts 与 CSS 结合使用大 20 倍。 如果我使用Using SVG with JavaScript,这就是一个大问题,不包括其他js、jquery、bootstrap。仅加载 FontAwesome 5
Angular 6 Service Worker 正在缓存字体很棒的图标,无法在离线模式下检索它们
我对 font-awesome 和 PWA 离线模式有问题。当我的应用程序加载时,它会缓存构建的生产包中的所有内容以及字体很棒的文件。 当我切换到“o...
使用 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 代码,为什么大小没有改变?如何将其放置在页脚横幅的中间? 我...
我目前正在开发一个项目,尝试调整侧边栏中元素的位置。侧边栏包含 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 替换一个很棒的字体图标。 例如,如果 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 个控制台错误...
我在点击图标后旋转-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 设置,但我认为使用起来不太方便。