font-awesome 相关问题

在移动响应视图中居中图像

我正在使用 Bootstrap 和 FontAwesome 开发一个网站，其中包含可点击的图像和相交的超棒字体元素。结果，我想出了以下代码： ...

FontAwesome 6 与 Angular 18：“IconDefinition”类型的参数不可分配给“IconName |”类型的参数图标查找'

我已将我的 Angular 项目从 17 更新到 18，还将 FontAwesome 更新到 6.6.0，将 @fortawesome/angular-fontawesome 更新到 0.15.0。我已经检查了 package-lock.json 和所有 FontAwesome 包...

如何在 .Net Core 项目的布局中包含 font-awesome（通过 nuget 安装）？

我有一个简单的 .NET Core 项目，其中包含以下 .csproj 文件： netcoreapp2.2 我有一个简单的 .NET Core 项目，其中包含以下 .csproj 文件： <Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp2.2</TargetFramework> <DebugType>full</DebugType> </PropertyGroup> <ItemGroup> <PackageReference Include="bootstrap" Version="4.3.1" /> <PackageReference Include="Font.Awesome" Version="5.9.0" /> <PackageReference Include="Microsoft.AspNetCore" Version="2.2.0" /> <PackageReference Include="Microsoft.AspNetCore.CookiePolicy" Version="2.2.0" /> <PackageReference Include="Microsoft.AspNetCore.HttpsPolicy" Version="2.2.0" /> <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.2.0" /> <PackageReference Include="Microsoft.AspNetCore.Mvc.TagHelpers" Version="2.2.0" /> <PackageReference Include="Microsoft.AspNetCore.Session" Version="2.2.0" /> <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="2.2.0" /> <PackageReference Include="Microsoft.EntityFrameworkCore" Version="2.2.4" /> <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="2.2.4" /> <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="2.2.4" /> </ItemGroup> 如您所见，它包含 Bootstrap。它与 Bootstrap 配合得很好。恢复项目后我可以在我的wwwroot文件夹中看到它： 但是 Font-Awesome 怎么样？恢复项目后我看不到库的来源。所以，我有一个问题：如何将 Font-Awesome 包含到我的 _Layout.cshtml 文件中？ 我在这里找到了 Font-Awesome： 但我不明白如何将它用于这个地方。 如果安装了软件包，您可以在中找到软件包文件 C:/Users/Your Current User/.nuget/packages/font.awesome。 “content”目录下有所有文件，可以手动导入到项目wwwroot文件夹中，像其他静态文件一样使用。

如何用Tailwind和React制作圆形填充动画？

我正在将 Font Awesome 与 React 和 Tailwind 结合使用，并使用这些带有某些样式的图标： 我正在将 Font Awesome 与 React 和 Tailwind 结合使用，并使用这些具有某些样式的图标： <FontAwesomeIcon icon={faFacebook} className="text-facebook bg-white rounded-full hover:text-white hover:bg-facebook transition-colors duration-300 ease-in-out" size="6x" /> 但是，我想用 Tailwind 制作一个悬停动画，就像这个 gif 一样： 有人知道如何做到这一点吗？ 我直接尝试了 Font Awesome 的分层方法，但无法使其工作。 您可以在元素的中心创建一个零尺寸的跨度，并通过动画来增加它的大小。从零到所需具备。隐藏溢出，您不必担心确切的尺寸。 或者你也可以做一个纯CSS的解决方案。我也做过类似的事情，就是按钮上产生涟漪。我可以给你代码，你可以修改它以具有纯色并且不会消失 .ripple { overflow: hidden; } .ripple::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(0, 0, 0, 0.4) 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform 0.5s, opacity 1s; } .ripple:active::after { transform: scale(0, 0); opacity: 0.2; transition: 0s; }

openlayers 中超棒的 svg 图标

我知道以前也有人问过类似的问题，但他们的答案对我没有帮助。 我正在尝试使用 Fontawesome-Icons 作为 Openlayers 地图中的标记，如下所示： 常量 svg = ` 我知道以前也有人问过类似的问题，但他们的答案对我没有帮助。 我正在尝试使用 Fontawesome-Icons 作为 Openlayers 地图中的标记，如下所示： const svg = ` <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--> <path d="M320 64c0-12.6-7.4-24-18.9-29.2s-25-3.1-34.4 5.3L131.8 160H64c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64h67.8L266.7 471.9c9.4 8.4 22.9 10.4 34.4 5.3S320 460.6 320 448V64z"/></svg> `; const svgUrl = 'data:image/svg+xml;charset=utf-8,' + svg; let measurePointStyle = new ol.style.Style({ image: new ol.style.Icon({ src: svgUrl, scale: 1 }), text: new ol.style.Text({ text: "IO", offsetY: 25, fill: new ol.style.Fill({ color: '#000' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) }) }); 样式的文本部分正确显示在地图上，但图标却没有。没有错误。 我已经寻找解决方案一个多小时了，但找不到任何有帮助的东西。如果有人能告诉我我在这里做错了什么，我将不胜感激。 您必须替换 all 双引号，因为 src 属性本身包含在双引号中 img { height:160px } <script> let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--> <path d="M320 64c0-12.6-7.4-24-18.9-29.2s-25-3.1-34.4 5.3L131.8 160H64c-35.3 0-64 28.7-64 64v64c0 35.3 28.7 64 64 64h67.8L266.7 471.9c9.4 8.4 22.9 10.4 34.4 5.3S320 460.6 320 448V64z"/> </svg>`; document.write(`<img src="data:image/svg+xml;charset=utf-8,${svg}">`); svg = svg.replaceAll(`"`,`'`); document.write(`<img src="data:image/svg+xml;charset=utf-8,${svg}">`); </script>

React Js 项目上的 Font Awesome 图标

根据 Font Awesome 文档，我按照下面的示例进行操作，但没有得到任何结果。过去我在 html 项目中经常使用 font Awesome。但这是我第一次...

未捕获错误：fa-icon/fa-duotone-icon 组件需要属性图标。在http://localhost:9876/_karma_webpack_/polyfills.js:23598:29

我正在项目中运行我的测试用例。执行测试用例时，我遇到以下错误。虽然他们没有破坏我的测试用例，但仍然在控制台中打印大量日志。 我是...

.npmrc 应该被忽略吗？

Fontawesome Pro 说明描述了将密钥放置在 .npmrc 文件中，但尚不清楚应如何管理该文件。具体来说，这个文件应该被 Git 忽略吗？

如何在 Matter.js 中使用 SVG 图像？

我正在尝试做的事情： 在 Matter.js 中使用 Font Awesome SVG - sleigh。 我试过这个： Matter.Bodies.fromVertices(500, 50 , Matter.Svg.pathToVertices("sleigh.svg")) 我正在尝试做的事情： 在 Matter.js 中使用 Font Awesome SVG - sleigh。 我试过这个： Matter.Bodies.fromVertices(500, 50 , Matter.Svg.pathToVertices("sleigh.svg")) <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M612.7 350.7l-9.3-7.4c-6.9-5.5-17-4.4-22.5 2.5l-10 12.5c-5.5 6.9-4.4 17 2.5 22.5l9.3 7.4c5.9 4.7 9.2 11.7 9.2 19.2 0 13.6-11 24.6-24.6 24.6H48c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h516c39 0 73.7-29.3 75.9-68.3 1.4-23.8-8.7-46.3-27.2-61zM32 224c0 59.6 40.9 109.2 96 123.5V400h64v-48h192v48h64v-48c53 0 96-43 96-96v-96c17.7 0 32-14.3 32-32s-14.3-32-32-32h-96v64c0 35.3-28.7 64-64 64h-20.7c-65.8 0-125.9-37.2-155.3-96-29.4-58.8-89.6-96-155.3-96H32C14.3 32 0 46.3 0 64s14.3 32 32 32v128z"/></svg> 但是得到： matter.js:4624 matter-js: Svg.pathToVertices: SVGPathSeg not defined, a polyfill is required. matter.js:7554 Uncaught TypeError: Cannot read property 'numberOfItems' of undefined 我做错了什么？ （PS：我对 Matter.js 还很陌生，如果这是一个愚蠢的问题，我很抱歉……） 让这个工作可能有点麻烦，因为，正如文档指出的那样，需要几个外部脚本来polyfillSVGPathSeg和将2D多边形分解成凸块。版本挫折随之而来。 参考了官方示例和这个过时的Codepen示例后对我有用的版本如下面的代码片段所示。 值得注意的是，Matter.Bodies.fromVertices文档指出：“如果顶点是凹的，如果poly-decomp.js可用，它们将被分解。请注意，这个过程不能保证支持复杂的顶点集（例如有孔的可能会失败）”，这可能是您在渲染主体中看到的额外线条的原因。 此外，MJS 的内置渲染器主要用于原型设计目的，因此如果您要在页面上对原始 SVG 元素进行动画处理，则主体上有一条额外的线可能并不重要。您也可以尝试高级字体真棒填充雪橇，但我无法访问它们。 const engine = Matter.Engine.create(); const runner = Matter.Runner.create(); const render = Matter.Render.create({ element: document.body, engine: engine }); const bodies = [ Matter.Bodies.rectangle(400, 210, 810, 60, {isStatic: true}), ...[...document.querySelectorAll("svg path")].map(path => { const body = Matter.Bodies.fromVertices( 100, 80, Matter.Svg.pathToVertices(path), {}, true ); Matter.Body.scale(body, 0.2, 0.2); return body; }) ]; Matter.Composite.add(engine.world, bodies); Matter.Runner.run(runner, engine); Matter.Render.run(render); svg {display: none;} <script src="https://cdn.jsdelivr.net/npm/[email protected]/pathseg.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/decomp.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.20.0/matter.js"></script> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sleigh" class="svg-inline--fa fa-sleigh fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M612.7 350.7l-9.3-7.4c-6.9-5.5-17-4.4-22.5 2.5l-10 12.5c-5.5 6.9-4.4 17 2.5 22.5l9.3 7.4c5.9 4.7 9.2 11.7 9.2 19.2 0 13.6-11 24.6-24.6 24.6H48c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h516c39 0 73.7-29.3 75.9-68.3 1.4-23.8-8.7-46.3-27.2-61zM32 224c0 59.6 40.9 109.2 96 123.5V400h64v-48h192v48h64v-48c53 0 96-43 96-96v-96c17.7 0 32-14.3 32-32s-14.3-32-32-32h-96v64c0 35.3-28.7 64-64 64h-20.7c-65.8 0-125.9-37.2-155.3-96-29.4-58.8-89.6-96-155.3-96H32C14.3 32 0 46.3 0 64s14.3 32 32 32v128z"></path></svg> 要重现您的错误，请注释掉 <script src="https://cdn.jsdelivr.net/npm/[email protected]/pathseg.js"></script>

如何让 Font Awesome 图标周围出现水平线？

问题 我正在尝试创建一个作品集网站，并且想在两条水平线之间放置一个 Font Awesome 图标（如下所述），但它不起作用。我查看了 Stack Overflow 并...

Blazor Server 8 高级导航字体很棒的超大图标

我在使用高级导航时遇到 Font Awesome 和 Blazor Server 8 问题。我创建了一个新的基本应用程序，并将 FontAwesome 包中的一个图标放置在主页上。什...

我们如何在 Prime 中使用 SVG 图标？

我们需要使用 FontAwesome Pro SVG（以及其他 SVG 图标）。但是，某些 UI 元素是在代码中构建的，而不是在模板中构建的。我们的开发人员告诉我，这是不可能的...

图标从哪里来？

我使用 GitHub 上的 Flutter 项目来学习 Dart/Flutter。但现在我有一个问题，因为我不知道图标从哪里来！ 这是代码片段： 图标（图标.搜索，颜色：颜色.黑色，...

如何在 2 个不同的字体很棒的图标之间创建过渡？

我在 HTML 中有这个按钮： 我在 HTML 中有这个按钮： <button id="sidebar-toggle-button" class="btn btn-primary header-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"> <div class="icons"> <i id="sidebar-toggle-default" class="fa-solid fa-bars sidebar-toggle-icon-default"></i> <i id="sidebar-toggle-active" class="fa-solid fa-bars-staggered sidebar-toggle-icon-active"></i> </div> </button> 它是我用 Bootstrap 制作的可折叠侧边栏的一部分（正式称为 offcanvas）。当我将鼠标悬停在其上时，我希望 "sidebar-toggle-default" 图标转换为 "sidebar-toggle-active" 图标。 我发现this线程告诉我可以只用CSS来做到这一点，但效果对于我想要做的事情来说太复杂了，而且我似乎也无法在我自己的代码中复制它。 我想要一个非常简单的动画。默认图标是垂直堆叠的 3 个条形，其下方的“活动”图标是相同的，但中间的条形相对于其余条形有轻微的偏移。当我将鼠标悬停在图标上时，我希望过渡看起来像中间栏被向前推。有办法实现吗？ 这是一个非常简单的技巧 - 将第二个图标设置为 position: absolute: .icons { position: relative; display: flex; i { transition: opacity .4s; &:last-child { position: absolute; left: 0; top: 0; opacity: 0; } } } .header-btn { &:hover { .icons { i { &:first-child { opacity: 0; } &:last-child { opacity: 1; } } } } } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet"/> <button id="sidebar-toggle-button" class="btn btn-primary header-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"> <div class="icons"> <i id="sidebar-toggle-default" class="fa-solid fa-bars sidebar-toggle-icon-default"></i> <i id="sidebar-toggle-active" class="fa-solid fa-bars-staggered sidebar-toggle-icon-active"></i> </div> </button>

字体很棒，并非所有图标都显示

我正在使用 font Awesome CDN 来使用图标，但并非所有图标都显示，我放了 2 个图标的 2 个示例，第一个显示，第二个不显示，它显示为正方形内的 X，什么要去...

Font Awesome Pro 6.0 Duotone 图标图层位置问题

我有很棒的字体6.0专业版。但问题是，双色调图标图层位置设置不正确。看我的做法和截图。 .fa-</desc> <question vote="0"> <p>我有font Awesome 6.0 Pro版本。但问题是，双色调图标图层位置设置不正确。看我的做法和截图。</p> <pre><code> &lt;style type=&#34;text/css&#34;&gt; .fa-duotone{ font-size:30px; text-align:center;} &lt;/style&gt; &lt;i class=&#34;fa-duotone fa-crow&#34; style=&#34;--fa-secondary-opacity: 1.0; --fa-primary-color: dodgerblue; --fa-secondary-color: gold;&#34;&gt;&lt;/i&gt; &lt;i class=&#34;fa-duotone fa-campfire&#34; style=&#34;--fa-secondary-opacity: 1.0; --fa-primary-color: sienna; --fa-secondary-color: red;&#34;&gt;&lt;/i&gt; </code></pre> <p>看截图： <a href="https://i.sstatic.net/Uvprg.jpg" rel="nofollow noreferrer">Font Awesome 双色调图标图层问题</a></p> <p>我该如何修复它......？</p> </question> <answer tick="false" vote="0"> <p>以防万一，如果在 FontAwesome Kit 中上传自定义双色调图标时发生图层配置，为了节省某人的麻烦，我经历了“自定义图标上传功能尚不支持双色调样式”（截至撰写本文时），所以当您上传 SVG，它会将图层传输到单个图层，您会看到已配置的图层。不用说，您也会失去图层的不透明度。</p> </answer> <answer tick="false" vote="0"> <p>明白了： 如果图标显示在非“DIV”（如 SPAN）中，则双色调在某些浏览器中显示错误。渲染可能需要“DIV”的定位属性才能显示透明的第二层。 如果你换行：一个带有内联块的跨度，问题就解决了，并且字体很棒的双色调正确渲染</p> </answer> </body></html>

如何在CSS中添加很棒的字体

我正在尝试添加一个来自 font Awesome 的图标，但由于某种原因，当我加载页面时它没有出现。 下面是我的 html 代码，我尝试以不同的方式添加很棒的字体。 <...

NextJS React 生产就绪，带有很棒的图标

我应该如何减小捆绑包的大小？我们添加了 fortawesome/fontawesome，但只使用了一些图标，大约 20 个。难道捆绑包中包含了 fontawesome 图标中的所有图标吗...

FontAwesome 大小属性不会改变大小

我的布局中有以下代码： // 太棒了 从'@fortawesome/fontawesome-svg-core'导入{配置，库}； 从 '@fortawesome/free-solid-svg-icons' 导入 { fas } 导入 {far } fr...

破折号 dbc 内的图标。按钮不显示

我正在编写一个破折号表单来从用户那里获取密码。我想要一个图标，允许用户以纯文本而不是隐藏的方式查看他们的输入。为此，我创建了一个 InputGrou...