font-awesome 相关问题

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

为什么不是所有 Font Awesome 图标都可以与 boostrapCDN 一起使用？

根据我的理解，所有 Font Awesome 图标都应该与链接此引导样式表一起使用。但是，我刚刚让一个 .fa fa-deskto 可以工作，其他的不显示，例如第二个是：

html css reactjs twitter-bootstrap font-awesome

回答 2 投票 0

我需要使用画布drawImage()渲染字体很棒的图像。 drawImage 接受图像参数： https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage#image 一个元素...

javascript canvas font-awesome drawimage

回答 2 投票 0

如何在 JSF 中使用 Font Awesome 等 3rd 方 CSS 库？浏览器找不到 CSS 文件中引用的字体文件

我正在尝试将 Font Awesome 集成到 JSF 中。但浏览器找不到字体文件。它们显示为空方块...

css jsf font-awesome

回答 6 投票 0

FontAwesome 图标仅在 /public 文件夹之后有效

我遇到了 FontAwesome 图标的问题，它们只有在我将 /public 放在 URL 末尾（例如 www.example.com/public）后访问 laravel 项目后才会显示和工作如果我指出我的...

php laravel icons font-awesome

回答 1 投票 0

无法将 FontAwesome 图标置于圆圈内

我试图将 FontAwesome 图标置于圆形按钮的中心，但我无法让它工作（该图标一直出现在圆圈上方，如图所示）我的 HTML 如下：我试图将 FontAwesome 图标置于圆形按钮的中心，但我无法让它工作（该图标一直出现在圆圈上方，如图所示我的HTML如下： <div class="socials"> <div class="socialbuttons"> <a class="fa-brands fa-instagram" href="https://instagram.com" target="_blank"></a> <a class="fa-brands fa-github" href="https://instagram.com" target="_blank"></a> </div> </div> 还有我的CSS： .socialbuttons{ position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .fa-brands{ text-decoration: none !important; color: white !important; background: #1a1a1a; width: 40px; height: 40px; flex-direction: column; display: inline-block; justify-content: center; align-items: center; border-radius: 100%; margin: 5px; } 如有任何帮助，我们将不胜感激我已经尝试了许多不同的对齐方法，调整宽度和高度的大小，在 div css 中移动宽度和高度，但仍然一无所获将链接从 display: inline-block 更改为 display: inline-flex a.fa-brands { margin: 2em; text-decoration: none !important; color: white !important; background: #1a1a1a; width: 40px; height: 40px; flex-direction: column; display: inline-flex; justify-content: center; align-items: center; border-radius: 100%; margin: 5px; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" /> <div class="socials"> <div class="socialbuttons"> <a class="fa-brands fa-instagram" href="https://instagram.com" target="_blank"></a> <a class="fa-brands fa-github" href="https://instagram.com" target="_blank"></a> </div> </div>

html css font-awesome

回答 1 投票 0

字体很棒 - 图标旋转在隐藏然后显示时不会旋转

当我的页面加载时，我通过将其显示属性设置为 none 来隐藏 icon-refresh + icon-spin 图标。现在，执行某些操作后，我希望显示此图标。我调用 jQuery 的 .show() ...

jquery font-awesome

回答 5 投票 0

如何在按钮上显示 FontAwesome 微调器？

我使用 Bootstrap 和 FontAwesome 有以下 HTML：我使用 Bootstrap 和 FontAwesome 有以下 HTML： <button type="submit" class="btn btn-primary"> <i class="fas fa-spinner fa-spin" style="display:none;"></i> <i class="fa-solid fa-file-code"></i> HTML </button> 使用 JQuery，我有一个应该显示 i.fa-spinner 元素的点击事件： $(".btn").click(function (event) { $(".fa-spinner", this) .show() .attr('style', 'display:inline-block;'); return true;}); 这不起作用——尽管源代码似乎正在更新 i 元素上的样式属性，但它实际上并没有显示在页面上。如果我向单击事件返回 false，它会起作用（微调器显示），但显然该按钮不会提交表单。我也在用锚元素做同样的事情，而且它们工作得很好。有什么建议吗？我尝试将 i 元素包装在 span 元素中并显示/隐藏它，但它仍然不起作用。我正在使用 Bootstrap 5.1、FontAwesome 6.2.1 和 JQuery 3.5。如果您使用 Bootstrap，请使用内置类，即 d-none。您可以打开/关闭此类，或在单击时将其删除。 $(".btn").click(function(event) { $(this) .find(".fa-spinner") .removeClass('d-none'); // or $.fn.toggleClass return true; }); <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> <button type="submit" class="btn btn-primary"> <i class="fas fa-spinner fa-spin d-none"></i> <i class="fa-solid fa-file-code"></i> HTML </button>

html jquery bootstrap-5 font-awesome

回答 1 投票 0

为什么 Font Awesome 图标以 SVG 格式呈现？

在我的 Angular5 项目中，我使用 FontAwesome 图标：静态图标和微调器。我运行 npm install font-awesome 并安装了 4.7.0 版本。 “依赖项”：{ .... “字体真棒”：“4.7.0” } 在我的...

css angular font-awesome

回答 1 投票 0

如何在我的 SVG 图像中包含 Font Awesome 图标？

我有一个包含图像的 SVG：我有一个包含图像的 SVG： <g><image id="myImage" class="myClass" x="12" y="15" width="10" height="10" xlink:href="/images/pic.png"/></g> 如何用很棒的字体图标替换该行： <g><i class="icon icon-cloud-download" x="12" y="15" width="10" height="10"></i></g> 似乎不起作用，因为图像没有显示。 i 不是有效的 SVG。您需要包含显示图标的实际字符。如果您查看 font Awesome 的样式表，您会看到... .icon-group:before { content: "\f0c0"; } .icon-link:before { content: "\f0c1"; } .icon-cloud:before { content: "\f0c2"; } .icon-beaker:before { content: "\f0c3"; } .icon-cut:before { content: "\f0c4"; } .icon-copy:before { content: "\f0c5"; } .icon-paper-clip:before { content: "\f0c6"; } .icon-save:before { content: "\f0c7"; } .icon-sign-blank:before { content: "\f0c8"; } .icon-reorder:before { content: "\f0c9"; } .icon-list-ul:before { content: "\f0ca"; } .icon-list-ol:before { content: "\f0cb"; } .icon-strikethrough:before { content: "\f0cc"; } .icon-underline:before { content: "\f0cd"; } .icon-table:before { content: "\f0ce"; } 但这些是为 CSS 编码的 unicode 字符。在 SVG 中，您需要将示例 \f040 的语法更改为： <g><text x="0" y="0"></text></g> 然后在样式表中添加： svg text { font-family: FontAwesome; } 根据 Niek 的评论，如果您使用免费版本的 Font Awesome 5+，则必须使用以下字体系列声明： svg text { font-family: 'Font Awesome 5 Free'; } 我的演示 <!DOCTYPE html> <html> <head> <script src="http://d3js.org/d3.v3.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div title="Code: 0xe800" class="the-icons span3"> <H3>Standard using:</H3> <i class="fa fa-camera-retro fa-4x"></i> <br> <H3>SVG using:</H3> </body> </html> JS var svg = d3.select("body") .append("svg") .attr("width", 250) .attr("height", 250); svg.append("text") .attr("x",0) .attr("y",70) .attr("font-family","FontAwesome") .attr('font-size', function(d) { return '70px';} ) .text(function(d) { return '\uf083'; }); 下面的代码非常适合我。 svg.append('tspan') .attr('class', 'fa') .text('\uf05a')

css svg font-awesome

回答 3 投票 0

如何在 SVG 圆圈中放置 Font Awesome 图标？

如何让奖杯位于圆圈内、2000 的正下方？如何让奖杯位于圆圈内、2000 的正下方？ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css"> <div class="text-center content-align-items"> <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke-width="4" style="opacity: 0.8;stroke: rgb(76, 182, 172);fill:white"/> <text fill="#000000" font-size="18" font-family="Verdana" text-anchor="middle" alignment-baseline="center"> <tspan x="50" y="55">20000 <i class="fa fa-trophy"></i></tspan> </text> </svg> </div> https://jsfiddle.net/owc4kmLv/ 您的代码的问题是 <i> 不是 SVG 的一部分，因此浏览器将其移到 <svg> 元素之外。您可以使用另一个 <tspan> 与相应的 HTML 实体 : <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" /> <div class="text-center content-align-items"> <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke-width="4" style="opacity: 0.8;stroke: rgb(76, 182, 172);fill:white"/> <text fill="#000000" font-size="18" font-family="Verdana" text-anchor="middle" alignment-baseline="center"> <tspan x="50" y="55">20000</tspan> <tspan x="50" y="75" class="fa"></tspan> </text> </svg> </div>

html css bootstrap-5 font-awesome

回答 1 投票 0

无法解码下载的awesome font

我的网站使用 fontawesome https://fontawesome.com/ 作为图标。今天当我访问网站时，fontawesome图标加载失败，然后我打开devtools，显示警告（这个网站可以工作...

html css font-awesome

回答 1 投票 0

如何在不使用任何第三方库的情况下在React Native项目中使用Font Awesome？

我想在我的 android 反应本机项目中使用 Font Awesome 图标。我想手动执行此操作，而不使用任何第三方库，例如react-native-vector-icons或其他库。

android react-native font-awesome

回答 4 投票 0

未捕获错误：找不到模块“@fortawesome/free-regular-svg-icons”

我正在尝试将 ReactJS 与 font-awesome 一起使用，但出现模块未找到错误。这些文件位于 npm 模块文件夹中，所以我不确定出了什么问题。我的包裹里有以下物品。

reactjs font-awesome

回答 6 投票 0

Fontawesome 无法工作，因为图标未显示在页面中

我已从他们的网站添加了 fontawesome 链接，但图标未显示在页面中我使用了两个链接，即 <question vote="0"> <p>我已经从他们的网站添加了 fontawesome 链接，但图标没有显示在页面中</p> <p>我使用了两个链接，即</p> <pre><code><script src="https://kit.fontawesome.com/5a384e9641.js" crossorigin="anonymous"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'> </code></pre> <p>对于<pre><code><i class="fa-sharp fa-solid fa-pancakes"></i></code></pre></p> <p>但不工作</p> </question> <answer tick="false" vote="0"> <p>您正在使用版本 <pre><code>4.3.0</code></pre>，它仍然需要将 <pre><code>fa</code></pre> 类添加到图标元素才能首先正常工作；其次，v4.3 似乎不包含您想要使用的图标。 <pre><code><i class="fa fa-camera-retro"></i></code></pre> 例如，可以与您正在使用的版本配合使用。</p> <p><em>（移动评论以回答更容易找到解决方案，信用@CBroe）</em></p> </answer> </body></html>

html css font-awesome font-awesome-5

回答 0 投票 0

字体很棒图标在更改字体时消失

我正在尝试在我的网页中加入字体很棒的图标，一切正常，直到我更改为我选择的字体 Exo 2，并且图标显示为带边框的正方形。它与其他 f 配合得很好...

html fonts font-awesome google-font-api

回答 3 投票 0

为什么使用Nuxt v3静态生成时<font-awesome-icon />会输出两次后面的内容？

我正在将 vue-fontawesome 与 Nuxt 3 一起使用，如此处所述，我看到了这种奇怪的行为。说我有这样的东西我正在将 vue-fontawesome 与 Nuxt 3 一起使用，如here所述，我看到了这种奇怪的行为。说我有这样的东西 <a href="https://example.com"><font-awesome-icon icon="fa-brands fa-twitter" />Example</a> 如果我运行开发服务器，一切都很好，但如果我运行 generate 并通过静态 HTTP 服务器提供输出，我会打印两次“示例”。如果我将文本包装在标签中，我会得到标签和文本两次（即<span>Example</span><span>Example</span>）。但奇怪的是，生成的 HTML 不包含重复，所以我怀疑浏览器中发生了一些奇怪的事情。您可以从此处获取生成的站点作为可重现的测试用例。 https://andreafranceschini.org/files/afnuxt.tgz 我听说vue-fontawesome对SSR和静态生成不太满意，但我也看到其他人以同样的方式使用它，所以我想知道我可能做错了什么？编辑我也将其发布为“错误”here。编辑 2 解决方法是将图标单独包含在其他内容中，例如 span 标签。我找到了一个解决方法，即将图标单独包含在其他东西中，例如 span 标签。尝试将以下内容添加到您的 nuxt.config.ts 文件中： build: { transpile: [ '@fortawesome/fontawesome-svg-core', '@fortawesome/free-solid-svg-icons', '@fortawesome/free-regular-svg-icons', '@fortawesome/free-brands-svg-icons', '@fortawesome/vue-fontawesome' ] } （根据需要调整具体图标包导入。）我只能在两个地方找到网上提到的这个解决方案[1][2]，两个地方都没有提到这个重复问题。值得注意的是，所有官方文档中都没有它。也就是说，至少对我来说，这解决了这个问题以及控制台中Could not find one or more icon(s)错误消息的问题。谢谢@callum-watkins，你救了我的命。 Font Awesome Office 文档中似乎缺少 nuxt.config.ts 中的构建配置：配合使用

vue.js nuxt.js font-awesome nuxtjs3

回答 3 投票 0

如何使用 CSS3 制作 Google Now 麦克风图标？

我正在尝试使用纯 CSS3 创建“Google Now”麦克风图标。该图标在红色圆形背景上有一个白色麦克风。我尝试了 font-awesome 但没有成功我需要你的帮助来完成...

css icons font-awesome css-shapes

回答 2 投票 0

类型“IconDefinition”无法使用 React 在 FontAwesome 中分配给类型“IconProp”

我正在使用 FontAwesome 图标开发 React 应用程序。当尝试使用 @fortawesome/react-fontawesome 中的 FontAwesomeIcon 组件渲染图标时，我遇到了以下错误：

javascript reactjs package icons font-awesome

回答 1 投票 0

将 fontawesome 添加到故事书 Angular nx

我有一个 ui 组件：从 '@angular/common' 导入 { CommonModule } ；从“@angular/core”导入{组件、EventEmitter、输入、输出}；从 '@angular/material/co... 导入 { MatRippleModule }