font-awesome 相关问题

Font Awesome是一种标志性的独立矢量字体,最初开发用于Twitter Bootstrap前端框架。

为什么 FontAwesome 建议通过 .js 脚本而不是 CDN 链接包含?

我正在寻找一个 CDN 来链接到 FontAwesome。 他们的网站提供了一个 .js 链接(而不是使用我发现的这个开源 CDN) 它是否检查链接(或者尝试搜索...

回答 5 投票 0

字体真棒图标显示为正方形

我想使用很棒的字体为我的侧边栏制作一个图标,但图标变成了正方形。 我可以使用 cdn,但我想尝试离线。我将 all.min.css 放在 public 文件夹中的 css 文件夹中 输入图像描述...

回答 1 投票 0

在 Blazor WebAssembly 应用程序中更新到较新版本的 Bootstrap 和 font Awesome 的最佳方法

谁能告诉我从创建项目时使用的默认版本更新到 Blazor WebAssembly 应用程序中 Bootstrap 和 font Awesome 较新版本的最佳方法?

回答 3 投票 0

如何缩小FontAwesome 5.3.1的大小

将 SVG 与 JavaScript 结合使用比将 Web Fonts 与 CSS 结合使用大 20 倍。 如果我使用Using SVG with JavaScript,这就是一个大问题,不包括其他js、jquery、bootstrap。仅加载 FontAwesome 5

回答 3 投票 0

Angular 6 Service Worker 正在缓存字体很棒的图标,无法在离线模式下检索它们

我对 font-awesome 和 PWA 离线模式有问题。当我的应用程序加载时,它会缓存构建的生产包中的所有内容以及字体很棒的文件。 当我切换到“o...

回答 3 投票 0

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

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

回答 1 投票 0

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>

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 4 投票 0

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

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

回答 1 投票 0

用 svg 替换 font Awesome 图标

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

回答 2 投票 0

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

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

回答 1 投票 0

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

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

回答 4 投票 0

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

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

回答 1 投票 0

在 html 和 css 中旋转图标

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

回答 1 投票 0

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

回答 2 投票 0

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

我正在使用 marvelouse react-icons 包(http://gorangajic.github.io/react-icons/fa.html),特别是 font Awesome 包。 如果这不是反应,那么我只会添加一个属性...

回答 9 投票 0

为什么 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 设置,但我认为使用起来不太方便。

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.