Font Awesome是一种标志性的独立矢量字体，最初开发用于Twitter Bootstrap前端框架。
如何将Font Awesome添加到Next.js 13项目错误找不到模块
我想将 fontawesome 添加到我的 nextjs 13 项目中。我正在尝试实施很久以前就提出的解决方案#3。我也尝试过 fontawesome 文档中的解决方案。我是...
我之前使用过 Font Awesome 图标（以前的版本）。当时，我在 HTML 中使用了如下所示的 CDN。但现在我再也找不到了。使用它们的方式有什么变化吗？ 我之前使用过 Font Awesome 图标（以前的版本）。当时，我在 HTML 中使用了如下所示的 CDN。但现在我再也找不到了。使用方法有什么变化吗？ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"> 要使用新的免费Font Awesome 6，您可以再次使用 CDN（如果这是您的偏好），如下所示。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> 然后在 HTML 中使用图标，如下所示。 <i class="fa-solid fa-house"></i> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" /> 将此链接添加到 html 文件的 head 中， 和 使用很棒的字体链接作为图标。如果链接是这样的 <i class="fa fa-camera-retro"></i> 您想在您的页面中使用它 <a><i class="fa fa-camera-retro"></i> fa-camera-retro</a> 值得在此指出的是，虽然可以，但 CDN 是可能的（您也可以下载文件并在本地托管它们（https://fontawesome.com/docs/web/setup/host-yourself/webfonts））这些字体是“免费计划”版本的有限子集。 例如，fa-envelope-o 将作为免费图标出现，但如果您查看 webfonts 或 all.css，则不包含该图标。然而，如果您注册免费计划（https://fontawesome.com/plans），那就是。他们会向您发送一个 .js 链接，但您每月的连接数限制为 10k。这对于大多数网站来说都是合适的，并且比 CDN 选项提供了更多的选择。 我与 FA 无关 - 只是想明白为什么自己下载和托管字体是毫无意义的，你不妨注册一下！
使用 fa-solid fa-house 时不会显示 Font-awsome 5 house 图标
我似乎无法显示很棒的字体图标。 我已经导入了 font-awesome 5 并尝试使用以下图标 https://fontawesome.com/icons/house?f=classic&s=solid 我似乎无法显示很棒的字体图标。 我已经导入了 font-awesome 5 并尝试使用以下图标 https://fontawesome.com/icons/house?f=classic&s=solid <!DOCTYPE html> <html> <head> <title>Font Awesome Example</title> <!-- Add Font Awesome CSS link here --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/> <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-gOXQS8AR6DaIm7mMSpgqQ8MEcsp5DcTj8+9y+pKlc3VsLe9QlTuC4cBu/QbUlgeLY5FcfFv7p9AJRAj/EbNqA==" crossorigin="anonymous" referrerpolicy="no-referrer" />--> </head> <body> <h1>Font Awesome Example</h1> <i class="fa-solid fa-house"></i> </body> </html> 已解决：通过使用 font-awesome 6 cdn :(!! 这样做了，fa-solid fa-house 图标就可以工作了 <!DOCTYPE html> <html> <head> <title>Font Awesome Example</title> <!-- Add Font Awesome CSS link here --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <h1>Font Awesome Example</h1> <i class="fa-solid fa-house"></i> </body> </html>
如何在 React 中为 FontAwesome 图标创建动态通用的图标包装器
我想创建一个 React Icon-Component，我只需向其中传递一个带有图标名称的字符串，然后图标就会被渲染。 我按照此处的说明进行操作：https://fontawesome.com/docs/web/use-with...
如何使用 HTML 和 CSS 制作带有圆形图像和一些文本的卡片？
我是初学者。我正在练习 HTML 和 CSS。在实践项目中给出了下面的卡片。 如何仅使用 HTML 和 CSS 创建这种类型的卡片？ 请帮助我。
使用 Font Awesome 套件时，对脚本的访问已被 CORS 策略阻止
我一直在遵循 Font Awesome 指南如何使用他们的套件，但是当我在正文标记末尾插入此代码时，出现错误，并且无法使用任何图标。 <p>我一直在遵循 Font Awesome 指南如何使用他们的套件，但是当我在 <pre><code>body</code></pre> 标签末尾插入此代码时，出现错误，并且无法使用任何图标。</p> <pre><code><script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script> </code></pre> <p>这是完整的 HTML 文件：</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="icon" href="imgs/favicon.ico" /> <link rel="apple-touch-icon" href="imgs/logo192.png" /> <link rel="stylesheet" type="text/css" href="scss/main.css"> <title>My title</title> </head> <body> <div>Facebook<i class="fab fa-facebook"></i></div> <script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script> </body> </html> </code></pre> <p>这是错误消息：</p> <pre><code>Access to script at 'https://kit.fontawesome.com/a4c00a89bc.js' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. GET https://kit.fontawesome.com/a4c00a89bc.js net::ERR_FAILED </code></pre> <p>有什么想法吗？</p> </question> <answer tick="true" vote="2"> <p>看起来 JavaScript 调试服务器导致了这个问题，我因为实时编辑插件而使用了该服务器。当我重新启动服务器时，脚本开始工作。另外，如果我只是打开 html 文件，它就可以正常工作。但问题总是发生在 JavaScript 调试服务器第一次启动、打开浏览器时。</p> <p>快速说明：将脚本放在 head 标签之间，因为它将样式表插入到 html 文件中。</p> <p>（我在 phpStorm 中使用 JavaScript 调试服务器）</p> </answer> <answer tick="false" vote="0"> <p>我也有同样的问题。事实证明，我为我的 font Awesome 套件添加了域限制，您可以在 Font Awesome 网站上进行配置。我添加了 mydomain.com，而正确的方法是添加 *.mydomain.com 以允许我网站中的任何子域使用 font Awesome 脚本。一旦我修复了错误，问题就消失了。</p> <p>您可以在您的 Font Awesome 帐户中检查套件的域名设置，看看是否是 CORS 阻塞问题的原因。</p> </answer> <answer tick="false" vote="0"> <p>您没有使用自己的很棒的字体套件。这是您使用的从 w3schools 复制的脚本。 <pre><code><script src="https://kit.fontawesome.com/a4c00a89bc.js" crossorigin="anonymous"></script></code></pre></p> <p>使用你自己的。我使用了上面的脚本，但它不起作用，在 font Awesome 上创建一个帐户，它将提供一个工具包（cdn 链接）。它会起作用的。我用自己的套件解决了这个问题。</p> </answer> </body></html>
Font Awesome 图标在标题按钮的移动视图上显示不同
抱歉，完全菜鸟（自学）。在标题中的按钮中添加了一个 Font Awesome 图标（fa fa-phone-alt），该图标在桌面视图上正确显示，但在移动视图中它显示了 f...
如何从 FontAwesome 5 中提取所有图标用于 React/Typescript 应用程序？
我知道有一个很棒的字体备忘单，其中列出了所有图标，但是按类名拉入对我来说失败了。像下面这样的东西正在产生一个控制台错误，它找不到......
我有一个使用 Font Awesome 图标的 svg 应用程序。我正在尝试将 Font Awesome 图标在 SVG 圆圈内垂直居中，但我无法获得像素完美的垂直居中。我很接近，但是...
Next JS 中的 Font Awesome 6（测试版）和动态图标名称
我正在用 Next JS 开发一个网站。这是我第一次使用这种语言，我还有很多东西要学。 现在，我有 Font Awesome 的 Pro 订阅，我希望使用他们的组件...
查找可用字形名称列表以用于 JavaFX 中的 FontAwesomeIcons
我正在使用 SceneBuilder 设计一个 JavaFX-Stage。我想包括来自 FontAwesome 的图标。因此，我从 mvnrepository 下载了 fontawesome-8-2.jar：这里。我已将此 jar 文件添加到
error TS2314：通用类型'ɵɵComponentDeclaration'需要7个类型参数
我正在尝试在我的 Angular-13 应用程序中使用 Font-awesome 图标，每当我尝试使用 时，它都会抛出以下错误。我无法...
当我尝试在我的 nuxt 3 应用程序中渲染这个很棒的字体组件时，我遇到了以下错误，正确地遵循了所有 npm 安装并且无法在没有任何错误的情况下在应用程序中获取图标。 在
在反应中使用字体awsome unicode，我正在尝试在反应中使用unicode在占位符中添加图标
` ` <Form.Control type="text" style={{ fontFamily: 'fontawesome' }} placeholder=" Enter name of your driving school" className="px-3 py-2 w-100" onChange={(event: React.ChangeEvent<HTMLInputElement>) => { setDrivingSchoolName(event.target.value); }} />` 无法在 react js 中使用 unicode，fontawsome
如何使用 vite 在 laravel 应用程序中使用 fontawesome 图标？
我已经使用 npm 安装了@fortawesome/fontawesome-free 包。最新的 Laravel 应用默认使用 vite。我无法解决这个问题。任何帮助将非常感激。我的vite.c...
找不到模块：无法解析'@fortawesome/free-solid-svg-icons/faYoutube'
成功安装@fortawesome 6.4.0 后我正在使用“下一步”：“13.3.1”无法设置社交图标。 如何解决 找不到模块：无法解析 '@fortawesome/free-solid-svg-
如何使用 Twitter Bootstrap 将 Glyphicons 水平居中
我正在尝试将我的 FontAwesome 图标置于我的 Twitter Bootstrap 代码中。 这是我的 HTML： 我正在尝试将我的 FontAwesome 图标置于我的 Twitter Bootstrap 代码中。 这是我的 HTML： <div id="frontpage-content" class="content"> <div class="container"> <div class="row"> <div class="col-lg-4"> <span> <i class="fa fa-camera-retro fa-5x"></i> </span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, inventore, ipsa dolorum laborum sit alias iusto nam quibusdam ad distinctio rerum expedita autem itaque delectus iste mollitia perferendis sint libero accusamus in. Enim, natus necessitatibus pariatur optio explicabo consequuntur quod!</p> </div> <div class="col-lg-4"> <i class="fa fa-camera-retro fa-5x"></i> <p>Ut, aliquid, aperiam, veniam modi voluptates maiores nesciunt libero fugiat illum recusandae cum similique et alias possimus error ex tenetur quasi sint eius dicta officia earum eveniet suscipit corporis autem deleniti nihil sed! Earum blanditiis vel similique nisi fugit reprehenderit?</p> </div> <div class="col-lg-4"> <i class="fa fa-camera-retro fa-5x"></i> <p>Quisquam eos aperiam autem atque minus modi similique earum! Ab, laboriosam odit non quo officiis asperiores atque dolorum omnis vitae in qui officia sequi molestias quisquam velit exercitationem aperiam. Voluptatum, unde, nesciunt temporibus voluptates sint ab architecto at quod dolore.</p> </div> </div> </div> 这是我已经尝试过的： #frontpage-content { background-color: $bgDefault; i { text-align:center; } span { text-align:center; } } 完美适用于文本，但不适用于i元素。 我知道我可以将它居中，如果我给周围的 div 一个静态宽度，然后将 i 元素定位为... margin-right: auto; margin-left: auto; display: block; ...但我不想给周围的 div 一个静态宽度。 那么，如何在不应用静态宽度的情况下解决这个问题？ 编辑：我也知道center HTML元素，但这不是CSS，因此不是很方便。 所有你需要的是在你的容器display:block中用text-align:center定义idiv你就会拥有它： .col-lg-4 i { display:block; text-align:center } 这里有演示 编辑 #1： 由于这个答案似乎得到了一些关注，因此值得注意的是，更多的“twitter-bootstrapy”方法是 @SimoneMelloni 在他们对这个问题的回答中所建议的，即。 text-center 类的使用。 请注意，这与我的解决方案基本相同，考虑到所有text-center所做的设置text-align:center，它只是利用了推特引导功能。 另请注意，text-align:center仅适用于块级元素或您明确设置display:block的元素，如我上面的原始答案。在那里我需要指定它，因为我在 i 标签上使用它，这是一个 内联元素. 编辑 #2： 我刚刚在 center 元素上看到您的 [OP] 编辑：虽然它确实不是 CSS 而是 HTML，但这不是什么大问题，但更大的问题是它已经过时了。在 MDN 的 <center> 元素 文档中查看更多信息 <div class="text-center"> <i class="fa fa-camera-retro fa-5x"></i> </div> 没有打开 css 文件就成功了
如何编辑本地托管的字体真棒 zip 文件，但无法自定义颜色、对齐方式等
我从 font awesome 下载了 zip 文件，将其添加到项目文件中，但是当我尝试编辑图标的颜色、大小等时……没有任何反应，请帮助我如何编辑它 我试着瞄准我，fa-...
我在一些项目中使用了很棒的字体，但是我有一些我想用很棒的字体图标做的事情，我可以很容易地调用这样的图标： 是吗
如何在 React 中使用超棒的字体图标？ 如果我使用实体图标，我的代码才有效。 谢谢。