Font Awesome是一种标志性的独立矢量字体，最初开发用于Twitter Bootstrap前端框架。
方框而不是字体真棒图标 - CSS 和字体文件正确链接 - 如何修复？
“为什么我在网页上看到方框而不是 Font Awesome 图标？我已经正确链接了 Font Awesome CSS 和字体文件，但图标显示不正确。可能是什么
如何让 fontawesome 在 Angular 应用程序上工作
这太疯狂了。在过去三个小时的大部分时间里，我一直在尝试使用除 fa-plus 之外的任何字体真棒符号，但无济于事。 代码： 这太疯狂了。在过去三个小时的大部分时间里，我一直在尝试使用除 fa-plus 之外的任何字体真棒符号，但无济于事。 代码： <!-- This works --> <button *ngIf="queries.length < 3" class="btn slick_button float-start col-1" (click)="add_query()"> <i class="fa-sharp fa-light fa-plus fa-beat-fade fa-2xl" style="color: rgba(255, 255, 255, 0.75);"></i> </button> <!-- This does not (for fa-minus or any other sumbol that SHOULD be there) --> <button *ngIf="queries.length < 3" class="btn slick_button float-start col-1" (click)="add_query()"> <i class="fa-sharp fa-light fa-minus fa-beat-fade fa-2xl" style="color: rgba(255, 255, 255, 0.75);"></i> </button> angular.json: "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/@fontawesome/fontawesome-free/css/fontawesome.css" ], 包.json： "@fontawesome/fontawesome-free": "^6.4.0" 将其链接为 index.html 中的样式表也无济于事。 我错过了什么？为什么一个 sumbol 有效而其他的无效？！ 首先，我相信你正在使用包@fortawesome/fontawesome-free，因为npm中没有名为@fontawesome/fontawesome-free的包。 好吧，在玩了之后，您安装的包@fortawesome/fontawesome-free似乎不像原来的fontawesome，默认情况下它不包含文件fontawesome.css中的所有图标。您需要使用 all.css 来获得所有图标。在你的angular.json替换： "node_modules/@fortawesome/fontawesome-free/css/fontawesome.css" 与： "node_modules/@fortawesome/fontawesome-free/css/all.css"
加载 index.html 时出现此错误 - 404 [object%20HTMLElement]
没有函数被调用。我有 4 个，只创建了它们，但我还没有调用它们。我知道它们是有效的，因为我在制作它们时正在测试它们。我去开始添加事件列表...
这是我的标题组件： 这是我的标题组件： <header class="header"> <div class="icon-container"> <ul> <li class="list-item"><i class="fa-regular fa-bell"></i></li> <li class="list-item"><i class="fa-solid fa-gear"></i></li> <li class="list-item"><i class="fa-solid fa-arrow-right-from-bracket"></i></li> </ul> </div> </header> 当我在 index.html 文件中的结束 body 标记之前导入 font-awesome 时，此代码可以显示 fontawesome 中的图标。 <script src="https://kit.fontawesome.com/my-id.js"crossorigin="anonymous"></script> 不过，现在学的是web components。我为我的标题创建了一个 header.js 文件。 const template = document.createElement("template"); template.innerHTML = ` <div class="icon-container"> <ul> <li class="list-item"><i class="fa-regular fa-bell"></i></li> <li class="list-item"><i class="fa-solid fa-gear"></i></li> <li class="list-item"><i class="fa-solid fa-arrow-right-from-bracket"></i></li> </ul> </div> class header extends HTMLElement { constructor() { super(); // Create a shadow root this.attachShadow({ mode: "open" }); this.shadowRoot.appendChild(template.content.cloneNode(true)); } window.customElements.define("header-section", header); 现在html的另一部分还在渲染，但是图标消失了，请问怎么解决呢？ 由于您的 Web 组件中未加载字体超棒的图标字体，因此未显示图标。要解决这个问题，您可以使用模板中的链接标签在 Web 组件中加载超棒的字体。 修改模板的方法如下： const template = document.createElement("template"); template.innerHTML = ` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-jkihXtPklFJy8q3rnoEMBstczhBwFwO48lEQ7EDKlA5JX7xu5Q0NVg7lLeK/cHhV7hly0iygDRNyo6N88U6B9g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="icon-container"> <ul> <li class="list-item"><i class="fa-regular fa-bell"></i></li> <li class="list-item"><i class="fa-solid fa-gear"></i></li> <li class="list-item"><i class="fa-solid fa-arrow-right-from-bracket"></i></li> </ul> </div>`; 要在 shadowDOM 中使用，您需要在 shadowDOM 和 globalDOM 中加载 CSS。 让你的组件检查链接是否存在于 globalDOM 中， 如果不; Web 组件添加 href customElements.define('my-fa-element', class extends HTMLElement { constructor() { let href = "https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"; super().attachShadow({mode:'open'}) .innerHTML = `<style>@import url('${href}')</style>`+ [`check`,`square-check`,`circle-check`,`gear`] .map(icon=>`fa-${icon}: <i class="fa fa-${icon}"></i><br>`).join(""); if (!document.querySelector(`link[href="${href}"]`)) { document.head.append( Object.assign(document.createElement("link"), { rel: "stylesheet", href })) }; } }); <my-fa-element></my-fa-element>
@model IEnumerable @foreach（模型中的 var 类别） { @* @model IEnumerable<Reci_me.BL.Models.Category> <body onload="ChangeIcon()"> <ul> @foreach (var category in Model) { @*<div id="icon">@category.Name</div>*@ <li onload="ChangeIcon()"> <i id="icon" class="fa" style="font-size: 20px;color:black;"></i> <a id="iconName" asp-controller="Recipe" asp-action="Browse" asp-route-id="@category.Id">@category.Name</a> </li> } </ul> @* <h1 id="icon"></h1>*@ </body> <script type="text/javascript"> function ChangeIcon() { for (let i = 0; i < 7; i++) { if (document.getElementById("iconName").innerHTML == "American") { document.getElementById("icon").classList.add("fa-hotdog"); }else if (document.getElementById("iconName").innerHTML == "Greek") { document.getElementById("icon").classList.add("fa-fish"); } else if (document.getElementById("iconName").innerHTML == "Italian") { document.getElementById("icon").classList.add("fa-pizza-slice"); } else if (document.getElementById("iconName").innerHTML == "Mexican") { document.getElementById("icon").classList.add("fa-pepper-hot"); } } } </script> 这是目前的样子，请帮忙。现在已经为此工作了几天，需要帮助。建立一个食谱页面，你知道我在说什么。
Fontawesome webfonts 自 webpack 构建以来有时无法加载
我刚刚将我们项目中旧的 css 和 js 构建过程从 grunt（和 less 中的 css）迁移到 webpack 5（和 scss 中的 css），一切似乎都很好。但是，存在一个问题： 有时会...
并非所有图标都显示在选择下拉列表中使用 Font Awesome 图标
这个实现 它的布局脚本 我想在我的下拉列表中显示所有图标，即使我使用 fontawesome-free-5.15.4 所有免费图标都不是专业版。
单独的 .jv 扩展中的 javascript 是否应该有 html 文档类型，因为验证器警告我，我真的很困惑
javascript 无法在我的网页上运行， // 激活 Bootstrap 工具提示 $(函数(){ $('[data-toggle="tooltip"]').tooltip() }) // 平滑滚动...</desc> <question vote="0"> <p>javascript 无法在我的网页上运行，</p> <pre><code><script> // Activate Bootstrap tooltip $(function () { $('[data-toggle="tooltip"]').tooltip() }) // Smooth scrolling using jQuery easing $('a.nav-link').on('click', function(event) { if (this.hash !== '') { event.preventDefault(); var hash = this.hash;<kbd>your text</kbd> $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ window.location.hash = hash; }); } }); // Initialize Font Awesome FontAwesome.init(); </script> </code></pre> <p>我已经尝试了所有可能的方法，我需要一个用于较小屏幕预设的响应式折叠设计。</p> </question> <answer tick="false" vote="0"> <p>如果您的 JavaScript 在单独的 <pre><code>.js</code></pre> 文件中，则您根本不应该有任何 HTML：没有 <pre><code>DOCTYPE</code></pre>，没有 <pre><code><script></code></pre> 标签，只有 JavaScript 本身。例如：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>// Activate Bootstrap tooltip $(function () { $('[data-toggle="tooltip"]').tooltip() }) // Smooth scrolling using jQuery easing $('a.nav-link').on('click', function(event) { if (this.hash !== '') { event.preventDefault(); var hash = this.hash;<kbd>your text</kbd> $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ window.location.hash = hash; }); } }); // Initialize Font Awesome FontAwesome.init();</code></pre> <pre><code><!DOCTYPE html> <html> <head> <title>My Web Page</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="index.js" defer></script> </head> <body> <h1>My Web Page</h1> <!-- HTML goes here. --> </body> </html></code></pre> </div> </div> <p></p> <p>看起来您正在使用 jQuery，因此您需要从 HTML 文件中引用它。</p> <p>如果你的 JavaScript 是一个 HTML 文件，你可以像这样包含它：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <title>My Web Page</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> // Activate Bootstrap tooltip $(function () { $('[data-toggle="tooltip"]').tooltip() }) // Smooth scrolling using jQuery easing $('a.nav-link').on('click', function(event) { if (this.hash !== '') { event.preventDefault(); var hash = this.hash;<kbd>your text</kbd> $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ window.location.hash = hash; }); } }); // Initialize Font Awesome FontAwesome.init(); </script> </head> <body> <h1>My Web Page</h1> <!-- HTML goes here. --> </body> </html></code></pre> </div> </div> <p></p> </answer> </body></html>
How to use Font Awesome in css (content in <hr>)?
看起来是这样的： 小时 { 位置：相对； 边框：无； 溢出：可见； 文本对齐：居中； 宽度：80%； 顶部：3%； 左：10%； border-top: 3px solid #c7a175; 边界半径...
我一直在关注 FontAwesome 到 Vue 官方文档，但没有用。 我的包.json “依赖”：{ "@fortawesome/fontawesome-svg-core": "^1.2.36", &q...
您好，我正在尝试让复选框图标和加号显示在我网站上的复选框标签上。我将此 css 代码放在页面主 .css 文件中，但图标不会显示。这是 .css 的...
Font Awesome 可以与 Rails 7 中的导入映射一起使用吗？
我是 Rails 7 的 importmap 的新手，文档说你可以固定一个 JavaScript 模块然后导入它： ./bin/importmap pin react react-dom 从“反应”导入反应 导入 ReactDO...
ggplot2 和 fontawesome 只显示一个空的矩形
我尝试在 ggplot2 图中使用一些很棒的字体图标。特别是“fa-temperature-arrow-up”对我来说很有趣，但我无法让它发挥作用。我尝试了 emojifont 包，但没有
font-awesome fa-thin 不起作用而 fa 起作用
在我的网站上，以下代码有效： 在我的网站上，以下代码有效： <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"/> <i class="fa fa-bars" style="color: #ffffff;"></i> 但是，下面没有（显示正方形）： <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"/> <i class="fa-thin fa-bars" style="color: #ffffff;"></i> 我从这个网站获取代码：https://fontawesome.com/v6/icons/bars?f=classic&s=thin 我的问题是如何使fa-thin工作。 非常感谢您的帮助！ 在您链接到的文档上，单击入门。 这将带来一个模式，上面写着： 这是专业版图标！ 要使用“bars”的细样式，您需要订阅 Pro 级计划或永久 Pro 许可证，其中包括发布此图标（或样式）的特定版本的 Font Awesome。 您使用的是非官方的第三方 CDN，它只包含免费图标。
将 FontAwesome 添加到样式 amp-custom
我正在尝试放置 FontAwesome 的源代码： 在你的部分......
我正在开发一个角度应用程序，其中有一个 matInput，我试图在 matInput 的占位符中显示一个图标。我尝试使用的超赞字体图标是信息圆圈 我的代码 <...
font-awesome 从项目本地加载 415（不支持的媒体类型）
在项目中配置为从本地项目文件夹而不是从 CDN 加载“fontawesome.min.css”。按照以下步骤和配置，现在得到 415 Unsupported Media ty ...
Swift 字体显示在情节提要上，但模拟器 Xcode 14.3 上没有显示
有人能帮忙吗？运行模拟时无法查看我的字体。但我可以在故事板上看到我的字体， 第一张图片来自故事板，第二张图片来自模拟，我想要的字体...
FontAwesome fontawesome-webfont.woff2?v=4.5.0 404 找不到
我在我的 asp.net mvc 项目中使用 fontawesome 4.5。我在控制台上遇到以下错误 我在我的字体文件夹中包含了字体 并在 layout.cshtml 中排列 fontwesome 样式表 我在我的 asp.net mvc 项目中使用 fontawesome 4.5。我在控制台上遇到以下错误 我的字体文件夹中包含了字体 并在 layout.cshtml 中为 fontwesome 样式表划线 <link href="~/Content/font-awesome.min.css" rel="stylesheet" /> 我的字体属性是这样的 @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.5.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } 我还在 system.webServer 下的 web.config 文件中添加了静态内容 <staticContent> <remove fileExtension=".woff" /> <mimeMap fileExtension=".woff" mimeType="application/font-woff" /> <remove fileExtension=".woff2" /> <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" /> </staticContent> 并且还在 IIS 中添加了 MIME 类型 错误仍然存在。需要帮助解决这个问题 谢谢 也许你的 MIME 类型不正确。 请像下图一样改变。 从application/font-woff2到font/x-woff2