font-awesome 相关问题

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

我有API，它返回fontAwsome图标的名称，如下所示 “值”：1， “特征”： { “标题”：“...

flutter flutter-dependencies font-awesome

回答 1 投票 0

我正在开发 ASP.NET CORE MVC 应用程序，但在加载很棒的字体图标时遇到问题。文件夹布局如下：这是我的 _layout.cshtml 的样子：我正在开发 ASP.NET CORE MVC 应用程序，但在加载很棒的字体图标时遇到问题。这是文件夹布局：这是我的 _layout.cshtml 的样子： <environment include="Development"> <script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script> <link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.css" /> </environment> <environment exclude="Development"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" asp-fallback-src="~/lib/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery" crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal" crossorigin="anonymous" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"> </script> <link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.min.css" /> </environment> <script src="~/js/site.js" asp-append-version="true"></script> @RenderSection("Scripts", required: false) 这是我尝试使用 fontawesome 图标的方法： <span class='input-group date datepicker'> @Html.TextBoxFor(m => m.CandidateDetail.DateOfBirth, new { @id = "DateOfBirth", @class = "form-control" }) <span class="input-group-append"> <span class="input-group-text"><i class="fas fa-calendar"></i></span> </span> </span> 当我启动该项目时，我看到的只是一个正方形。我在这里做错了什么吗？要引用 font-awesome，您应该添加 ~/lib/font-awesome/css/all.css 而不是 ~/lib/font-awesome/css/fontawesome.css。将以下代码添加到 <environment include="Development"> <environment include="Development"> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <link href="~/lib/font-awesome/css/all.css" rel="stylesheet" /> </environment> 检查 Chrome 开发者工具上的控制台+网络选项卡 (f12) 如果您在本地 IIS 上托管应用程序，则大多数情况下 IIS 默认情况下不允许 mime 类型 .woff。您可以使用 web.config 添加 mime 类型 <system.webServer> <staticContent> <remove fileExtension=".woff2" /> <mimeMap fileExtension=".woff2" mimeType="font/woff2" /> </staticContent> </system.webServer> 另一个原因是 CSS 文件和字体文件之间的相对路径不匹配。因为您使用的是 FontAwesome 提供的相同目录结构，所以我不我想这就是问题所在。就我而言，我的 App MVC ASP.net 4.8 中的捆绑包中有 css 文件： bundles.Add(new StyleBundle("~/Content/css").Include( "~/css/sb-admin-2.min.css", "~/vendor/fontawesome-free/css/all.min.css", "~/vendor/datatables/dataTables.bootstrap4.min.css", "~/Content/jquery-ui.css", "~/Content/font/bootstrap-icons.min.css" )); 在我当地的环境中，它有效；但是，它在 Azure Web 应用程序中不起作用。为了解决这个问题，我决定将其从捆绑部分中删除，并将其直接添加到我的 _layout.cshtml 中的 HEAD 部分。 <head> @Styles.Render("~/Content/css") <link rel="stylesheet" href="~/vendor/fontawesome-free/css/all.min.css"> </head>

asp.net-core asp.net-core-mvc font-awesome

回答 3 投票 0

如何在 VScode 中为 Fontawesmome 库添加 vmArgs

我正在使用 VScode 和场景生成器开发 javafx 项目，我使用 fontawesome-8.2.jar 添加图标。当我尝试运行代码时，它给了我一个错误，如果我删除了 fontawesome 我...

java visual-studio visual-studio-code javafx font-awesome

回答 1 投票 0

Webpack 导入 font-awesome 库时出现问题

我正在构建一个 React 应用程序，需要导入字体很棒的 CSS，但我收到一条错误消息，指出该模块无法解析 woff2 文件。下面是我的代码：从 '

javascript css reactjs webpack font-awesome

回答 3 投票 0

悬停在字体真棒图标时改变颜色？

在 Font Awesome 文档的基础上，我创建了这个图标：基于 Font Awesome 文档我创建了这个图标： <span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse"></i> </span> 此代码创建此 html： <span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x">::before</i> <i class="fa fa-flag fa-stack-1x fa-inverse">::before</i> </span> 它是一个堆叠的旗帜图标。我想更改悬停事件上的图标颜色，我尝试了所有这些： .fa-stack:hover{ color: red } .fa-stack i:hover{ color: red } .fa-stack i before:hover{ color: red } 但不工作。如果您只想更改 hover 上旗帜的颜色，请使用： http://jsfiddle.net/uvamhedx/ .fa-flag:hover { color: red; } <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <i class="fa fa-flag fa-3x"></i> 使用 - !重要 - 覆盖默认黑色 .fa-heart:hover{ color:red !important; } .fa-heart-o:hover{ color:red !important; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <i class="fa fa-heart fa-2x"></i> <i class="fa fa-heart-o fa-2x"></i> 您唯一需要做的就是这个，例如： HTML： <span class="close_form"> <i class="fa fa-circle"></i> </span> CSS： .fa-circle { color: #d7d7d710; transition: 500ms; } .close_form:hover .fa-circle { color: #43434379; transition: 500ms; }

font-awesome font-awesome-4

回答 3 投票 0

向 SharpDX.DirectWrite.Factory 添加嵌入字体资源

我的 dll 由 .Net Framework 4.8 WPF 应用程序加载。它包括作为 .ttf 和 .otf 格式的嵌入资源的字体文件，我想将该字体以一种或另一种格式添加到 SharpDX 中。

fonts font-awesome sharpdx directwrite ninjatrader

回答 1 投票 0

WooCommerce 数量减号和加号图标未显示

我在 WooCommerce 产品页面上显示 + 和 - 数量图标时遇到一些问题。经过大量研究后，我发现出于某种奇怪的原因，WordPress 将类名赋予了

php jquery woocommerce icons font-awesome

回答 1 投票 0

Woocommerce WL：添加到购物车元素不显示 +/- 图标

大家早上好！我在 WooCommerce 产品页面上显示 + 和 - 购物车图标时遇到问题。经过大量研究后，我发现由于某种奇怪的原因 WordPress 给出了 c...

php wordpress woocommerce icons font-awesome

回答 1 投票 0

FontAwesome 未在已部署的 Netlify 网站上加载

我最近托管了一个 Netlify 网站。在我的机器（PyCharm 本地主机上的 2021 M1 Mac）上，其中一个页面包含一个网格，如下所示：然而，当我在 netlify 上托管它时，图标似乎丢失了

html css font-awesome

回答 1 投票 0

找不到图标{前缀: 'fab', iconName: 'spotify'}

我试图在页脚上显示一些图标，但它没有显示。向我抛出以下错误找不到图标 {prefix: 'fab', iconName: 'spotify'} 主要代码：常量页脚 = () => { 重新...

reactjs font-awesome

回答 2 投票 0

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

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

html css reactjs twitter-bootstrap font-awesome

回答 2 投票 0

canvas drawImage() 渲染 Font Awesome 图标

我需要使用画布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

font-awesome 相关问题

最新问题