font-awesome 相关问题

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

我使用这个 html 代码作为很棒的字体图标，它在桌面上完美显示，问题仅在于移动视图。**

html css font-awesome

回答 7 投票 0

Fontawesome 免费图标用作页面图标，例如 Fontawesome 免费图标用作页面图标，例如 <html><head> <link rel='icon' href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/pen-to-square.svg'> </head></html> 出现黑色图标的是 Chrome 选项卡：如何更改此图标颜色？还使用了Bootstrap 5。可以使用 bootstrap text-danger 类更改内部 html 页面颜色，例如 <i class="fa-regular fa-pen-to-square text-danger"></i> 或使用风格： .fa-pen-to-square { color: red; } 如何更改页面图标颜色？这是使用 FontAwesome 免费 SVG 图标、Bootstrap 5、jquery 和 jquery ui 的 ASP.NET 9 MVC 应用程序。更新看起来像颜色属性 fill = "#AB7C94" 应按照如何更改“svg”元素的颜色？中所述注入到 SVG 中并且内联数据 uri 应用于页面图标。颜色被指定为 html 颜色名称。如何在 svg 中使用 html 颜色名称或将它们转换为 svg 中所需的颜色十六进制值？或者 svg 过滤器可以应用于 FontAwesome 图标吗？不确定 FontAwesome 免费图标许可证是否允许图标修改。不幸的是，无法使用 HTML 中应用的 CSS 类或样式动态更改 favicon 颜色，因为浏览器将 favicon 呈现为独立于 DOM 的独立图像资源。要更改用作网站图标的 FontAwesome 图标的颜色，您需要修改 SVG 文件本身。大多数 CDN（包括 FontAwesome）以默认黑色或无颜色提供 SVG。他们不提供动态颜色定制。但是，您可以：搜索允许动态自定义 SVG 颜色的服务（尽管这些服务很少见且通常不是免费的）。 SVGOMG 或类似的 SVG 编辑器等工具可让您上传和编辑 SVG 文件。

css asp.net-mvc svg font-awesome favicon

回答 1 投票 0

如何在 HTML 中使用很棒的字体图标

嗨，我无法使用很棒的字体图标，我不知道问题是什么请向我解释一下如何在此版本中使用很棒的字体图标。步步是的，有一些这样的话题，但我...

html css fonts font-awesome

回答 4 投票 0

如何在图像的右上角叠加图标？

堆栈：反应相关包：FontAwesome => 'fortawesome' 相关包：React Bootstrap => 'react-bootstrap' 我目前拥有的：我正在构建一个个人资料页面，我希望用户...

javascript css reactjs font-awesome

回答 3 投票 0

在使用 vite 构建 javascript 包时如何确保包含 fontawesome 指令

在我的 vite/tailwind 项目中，我将以下内容作为安全列表的一部分： safe_twsty_arr = ['bg-pink-500', 'fa-2x', 'fa-fw', 'fa-user', 'flex', 'flex-col', 'font-bold ...</desc> <question vote="0"> <p>在我的 vite/tailwind 项目中，我将以下内容作为安全列表的一部分：</p> <pre><code><script lang="ts"> safe_twsty_arr = ['bg-pink-500 ', 'fa-2x', 'fa-fw', 'fa-user', 'flex ', 'flex-col ', 'font-bold ', 'font-mono ', 'h-6 ', 'invisible ', 'justify-center ', 'md:w-1/3 ', 'mt-4 ', 'p-1 ', 'pb-2 ', 'pl-2 ', 'pt-2 ', 'sm:max-md:hidden ', 'sm:max-md:w-full ', 'space-x-8 ', 'space-y-2 ', 'svg-inline--fa', 'text-2xl ', 'w-6 ']; let concString = safe_twsty_arr.join(' '); </script> <div class={concString}></div> <div class=''></div> </code></pre> <p>还安装了 @fortawesome/fontawesome-svg-core": "^6.6.0"。但是生成的包和 style.css 不包含任何 fontawesome 指令（如 fa-2x 等）的 css。</p> </question> <answer tick="false" vote="0"> <p>这是您实际的 tailwind.config.cjs / .js 吗？</p> <p>您是否包含内容指令？顺便说一下，您可以在安全列表中使用模式。这是一个例子：</p> <pre><code>module.exports = { … content: [ './your-directory-one-to-include/**/*.{ts,js,vue}', './your-directory-two-to-include/**/*.{ts,js,vue}', ], safelist: [ { pattern: /opacity-(0|10|20|30|40|50|60|70|80|90|100)/ }, { pattern: /grid-rows-(1|2|3|4|5|6|7|8|9|10|11|12)/ } ], … }; </code></pre> </answer> </body></html>

javascript css vite font-awesome bundler

回答 0 投票 0

FontAwesome 图标在反应/下一个应用程序中无法正常工作

已解决 - TLDR；将 import '@fortawesome/fontawesome-svg-core/styles.css' 添加到 _app.js / index.js 文件修复了该问题，并且 FontAwesome 按预期工作。我的问题是由 npx-create-next-... 引起的

reactjs next.js font-awesome

回答 5 投票 0

有没有办法检查哪个域正在访问我的 FontAwesome 套件？

今天，我突然收到一封来自 FontAwesome 的电子邮件，警告我我的工具包已收到本月分配的 10,000 浏览量限制的 60% 以上。问题是，我什至不知道在哪里

font-awesome

回答 1 投票 0

我在 Laravel 8 应用程序中安装 Font Awesome 失败

我想在我的 Laravel 8/Tailwind CSS 2.0.1 应用程序中添加 Font Awesome，搜索后，我按照以下方式安装它。 npm install font-awesome --save 然后我在文件 /mnt/

laravel font-awesome

回答 5 投票 0

使用 Firefox / google chrome 进行编码

在我的网站上，我使用 Font Awesome 作为图标。但是，我没有看到正确的图标，而是看到了正方形或空矩形等占位符（例如，而不是）。这个问题依然存在

google-chrome character-encoding font-awesome firefox-developer-tools

回答 1 投票 0

Docker 和带有 .npmrc 的私有包

我正在使用 .npmrc 文件来配置私有存储库（font-awesome-pro）。无需 docker 即可正常运行。但是使用 docker，npm 安装失败： npm 错误！代码E401 npm 错误！ 404401 未经授权：@

docker npm docker-compose font-awesome

回答 6 投票 0

FontAwesome 旋转器不会在 React 中旋转

我使用 npx create-react-app 创建了一个 React 应用程序。然后按照这些说明进行操作 https://fontawesome.com/how-to-use/on-the-web/using-with/react 我安装了 Font Awesome 依赖项：不...

reactjs font-awesome

回答 5 投票 0

为 h2 文本添加单独的 css 样式

我有这门课： .word-经销商标题这是 h2 中的文本主要制造零部件行业我想在 CSS 中为上述每个单词应用单独的样式，尤其是 font-family 。 ...

css frontend font-awesome

回答 2 投票 0

将SVG链接转换为css中的格式

我有像下面这样的CSS，背景图像： url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220% 200%2024%2024%22%3E%20%3Cpath%20d%3D%

css font-awesome

回答 1 投票 0

Magento 2 上的 Font Awesome 图标出现问题

我正在尝试在 Magento 2 (2.4.3) 中添加 Font Awesome 图标，但我有一个问题：HTML 标签没有被 svg 图标替换。脚本加载，HTML 标签呈现在页面上，但它不是......

magento font-awesome magento2

回答 2 投票 0

使用Font Awesome 6 Pro时如何使Font Awesome图标变实

我有以下伪CSS渲染正确的Font-Awesome图标，但不是实体图标：内容：“0dc”； font-family: 'Font Awesome 6 Pro'; 左内边距：5px；字体粗细：...

css font-awesome user-experience font-awesome-6

回答 1 投票 0

如何将字体很棒的插入符号从插入符号向右更改为插入符号向下？

如果我在 i 标签中使用 fa-folder 并在 JavaScript 中使用 fa-folder-open，下面的简单代码就可以工作，但是如果我替换 fa-caret-right 和 fa-caret-down，它就不起作用，并且我不明白为什么。任何...

javascript html css font-awesome

回答 3 投票 0

Font-Awesome 图标未显示在我的 ReactJS 网站中

我正在尝试在我正在处理的反应项目中使用网站标题旁边的字体，但它没有显示。我已经通过yarn导入了font-awesome包，并在我的ind中导入了它的css...

javascript html reactjs font-awesome

回答 1 投票 0

Fontawesome 6 本地托管不显示图标

我正在尝试在本地托管很棒的字体，尽管它没有显示其图标，我也不知道为什么。这是我所做的：我正在尝试在本地托管很棒的字体，尽管它没有显示其图标，而且我不知道为什么。这就是我所做的： <head> <meta http-equiv="Content-Type" content="text/html; charset = UTF-8"> <title>Title</title> <link rel="icon" type="image/x-icon" href="resources/favicon.ico" /> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="fontawsome/css/font-awesome.min.css"> <link rel="stylesheet" href="fontawsome/css/brands.min.css"> <link rel="stylesheet" href="fontawsome/css/solid.min.css"> </head> <body> <i class="fa-solid fa-user"></i> ... </body> 这是我添加到项目中的文件：我添加到项目中的很棒的字体文件我尝试查看https://docs.fontawesome.com/web/setup/host-yourself/webfonts，但它没有说要做任何不同的事情。我预计会显示很棒的图标好吧，这里有一些您可以尝试的解决方案：清除缓存：清除浏览器的缓存或执行硬刷新（macOS 上的 Ctrl + F5 或 Cmd + Shift + R）以删除旧的缓存文件。 Font Awesome 版本：确保您使用的类与当前的 Font Awesome 版本兼容。例如，Font Awesome 6+ 包含 fa-solid 类。如果您使用 Font Awesome 5 或更早版本，请使用 fas 而不是 fa-solid。检查浏览器开发者工具：按F12打开浏览器的开发者工具，然后检查“控制台”和“网络”选项卡是否有错误或资源加载失败（例如404）。您可能会注意到丢失的文件或不正确的路径可能会阻止渲染。

html css font-awesome

回答 1 投票 0

本地托管的 Fontawsome 6 不显示图标

我正在尝试在本地托管很棒的字体，尽管它没有显示其图标，我也不知道为什么。这是我所做的：我正在尝试在本地托管 font awsome，尽管它没有显示其图标，我也不知道为什么。这就是我所做的： <head> <meta http-equiv="Content-Type" content="text/html; charset = UTF-8"> <title>Title</title> <link rel="icon" type="image/x-icon" href="resources/favicon.ico" /> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="fontawsome/css/font-awesome.min.css"> <link rel="stylesheet" href="fontawsome/css/brands.min.css"> <link rel="stylesheet" href="fontawsome/css/solid.min.css"> </head> <body> <i class="fa-solid fa-user"></i> ... </body> 这是我添加到我的项目中的文件：我添加到我的项目中的字体很棒的文件我尝试查看https://docs.fontawesome.com/web/setup/host-yourself/webfonts，但它没有说要做任何不同的事情。我预计会显示 fontawsome 图标好吧，这里有一些您可以尝试的解决方案：清除缓存：清除浏览器的缓存或执行硬刷新（macOS 上的 Ctrl + F5 或 Cmd + Shift + R）以删除旧的缓存文件。 Font Awesome 版本：确保您使用的类与当前的 Font Awesome 版本兼容。例如，Font Awesome 6+ 包含 fa-solid 类。如果您使用 Font Awesome 5 或更早版本，请使用 fas 而不是 fa-solid。检查浏览器开发者工具：按F12打开浏览器的开发者工具，然后检查“控制台”和“网络”选项卡是否有错误或资源加载失败（例如404）。您可能会注意到丢失的文件或不正确的路径可能会阻止渲染。

html css font-awesome

回答 1 投票 0

如何在我的网页中定义类似FA图标的图标？

由于 Codeberg 图标不在 FA 中，我尝试将其包含在我的网页中（链接已简化），如下所示：由于 Codeberg 图标不在 FA 中，我尝试将其包含在我的网页中（链接已简化），如下所示： <script src='js/faCodeberg.js'></script> <link rel="stylesheet" href="css/site.css" type="text/css"> ... <i class="fa-brands fa-codeberg"></i> js/faCodeberg.js 在哪里 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var prefix = 'fab'; var iconName = 'codeberg'; var width = 512; var height = 512; var aliases = []; var unicode = 'f366'; var svgPathData = 'M0.00 8.56C0.00 14.69 4.25 14.69 4.25 14.69 4.25 14.69 10.92 6.07 10.92 6.07 10.87 5.84 10.65 6.07 10.65 6.07 10.65 6.07 17.04 6.07 17.04 6.07 17.04 6.07 15.04 6.07 15.04 6.07 15.04 6.07 14.84 6.07 14.84 6.07 14.84 6.07 12.76 6.07 12.76 6.07 12.76 6.07 11.42 6.07 11.42 6.07 11.42 6.07 8.97 6.07 8.97 6.07 8.97 6.07 8.65 6.07 8.65 6.07 8.65 6.07 6.07 6.07 6.07 6.07 6.07 6.07 4.89 6.07 4.89 6.07 4.89 6.07 9.41 6.07 9.41 6.07 9.41 6.07 9.82 6.07 9.82 6.07 9.82 6.07 12.89 6.07 12.89 6.07 12.89 6.07 13.94 6.07 13.94 6.07 13.94 6.07 10.59 6.07 10.59 6.07 10.59 6.07 10.08 6.07 10.08 6.07 10.08 6.07 6.54 6.07 6.54 6.07 6.54 6.07 5.61 6.07 5.61 6.07 5.61 6.07 9.92 6.07 9.92 6.07 9.92 6.07 10.48 6.07 10.48 6.07 10.48 6.07 14.50 6.07 14.50 6.07 14.50 6.07 15.36 6.07 15.36 6.07 15.36 6.07 10.18 6.07 10.18 6.07 10.18 6.07 10.73 6.07 10.73 6.07 10.73 6.07 14.78 6.07 14.78 6.07 15.58 3.57 10.81 1.81 14.78 1.65 11.20 -6.35 6.78 -6.35 6.78 -6.35 6.78 -6.35 0.00 4.14 0.00 8.56ZM10.44 13.30C10.44 13.30 10.99 13.30 10.99 13.30 10.99 13.30 14.54 13.30 14.54 13.30 14.54 13.30 14.88 12.86 14.88 12.86 14.88 12.86 10.44 13.30 10.44 13.30ZM13.71 12.86C13.71 12.86 13.15 12.86 13.15 12.86 13.15 12.86 10.78 12.86 10.78 12.86 10.78 12.86 10.30 12.43 10.30 12.43 10.30 12.43 13.71 12.86 13.71 12.86ZM9.13 12.43C9.13 12.43 8.58 12.43 8.58 12.43 8.58 12.43 7.78 12.43 7.78 12.43 7.78 12.43 7.08 12.00 7.08 12.00 7.08 12.00 9.13 12.43 9.13 12.43Z'; exports.definition = { prefix: prefix, iconName: iconName, icon: [ width, height, aliases, unicode, svgPathData ]}; exports.faCodeberg = exports.definition; exports.prefix = prefix; exports.iconName = iconName; exports.width = width; exports.height = height; exports.ligatures = aliases; exports.unicode = unicode; exports.svgPathData = svgPathData; exports.aliases = aliases; 并且 css/site.css 包含 .fa-codeberg:before { content: "\f366"; } 模仿 Font Awesome GitHub 中图标的 CSS 和 JS。但是，它不起作用，因为出现了另一个符号而不是图标。我做错了什么或者我没做什么？谢谢！解决方法是仅使用 CSS，将 SVG 包含在 data:image/svg+xml... 中： .fa-codeberg:before { content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0.00 8.56C0.00 14.69 4.25 14.69 4.25 14.69 4.25 14.69 10.92 6.07 10.92 6.07 10.87 5.84 10.65 6.07 10.65 6.07 10.65 6.07 17.04 6.07 17.04 6.07 17.04 6.07 15.04 6.07 15.04 6.07 15.04 6.07 14.84 6.07 14.84 6.07 14.84 6.07 12.76 6.07 12.76 6.07 12.76 6.07 11.42 6.07 11.42 6.07 11.42 6.07 8.97 6.07 8.97 6.07 8.97 6.07 8.65 6.07 8.65 6.07 8.65 6.07 6.07 6.07 6.07 6.07 6.07 6.07 4.89 6.07 4.89 6.07 4.89 6.07 9.41 6.07 9.41 6.07 9.41 6.07 9.82 6.07 9.82 6.07 9.82 6.07 12.89 6.07 12.89 6.07 12.89 6.07 13.94 6.07 13.94 6.07 13.94 6.07 10.59 6.07 10.59 6.07 10.59 6.07 10.08 6.07 10.08 6.07 10.08 6.07 6.54 6.07 6.54 6.07 6.54 6.07 5.61 6.07 5.61 6.07 5.61 6.07 9.92 6.07 9.92 6.07 9.92 6.07 10.48 6.07 10.48 6.07 10.48 6.07 14.50 6.07 14.50 6.07 14.50 6.07 15.36 6.07 15.36 6.07 15.36 6.07 10.18 6.07 10.18 6.07 10.18 6.07 10.73 6.07 10.73 6.07 10.73 6.07 14.78 6.07 14.78 6.07 15.58 3.57 10.81 1.81 14.78 1.65 11.20 -6.35 6.78 -6.35 6.78 -6.35 6.78 -6.35 0.00 4.14 0.00 8.56ZM10.44 13.30C10.44 13.30 10.99 13.30 10.99 13.30 10.99 13.30 14.54 13.30 14.54 13.30 14.54 13.30 14.88 12.86 14.88 12.86 14.88 12.86 10.44 13.30 10.44 13.30ZM13.71 12.86C13.71 12.86 13.15 12.86 13.15 12.86 13.15 12.86 10.78 12.86 10.78 12.86 10.78 12.86 10.30 12.43 10.30 12.43 10.30 12.43 13.71 12.86 13.71 12.86ZM9.13 12.43C9.13 12.43 8.58 12.43 8.58 12.43 8.58 12.43 7.78 12.43 7.78 12.43 7.78 12.43 7.08 12.00 7.08 12.00 7.08 12.00 9.13 12.43 9.13 12.43Z"></path></svg>'); } <i class="fa-codeberg"></i> 但是我想你想要这个有合适的外观，你提供的svgPathData看起来不太好...... .fa-codeberg:before { content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 4.233 4.233"><defs><linearGradient xlink:href="%23a" id="b" x1="42519.285" x2="42575.336" y1="-7078.789" y2="-6966.931" gradientUnits="userSpaceOnUse"/><linearGradient id="a"><stop offset="0" stop-color="%23000" stop-opacity="0"/><stop offset=".495" stop-color="%23000" stop-opacity=".3"/><stop offset="1" stop-color="%23000" stop-opacity=".3"/></linearGradient></defs><path fill="url(%23b)" d="M42519.285-7078.79a.76.568 0 0 0-.738.675l33.586 125.888a87.182 87.182 0 0 0 39.381-33.763l-71.565-92.52a.76.568 0 0 0-.664-.28z" paint-order="stroke markers fill" style="font-variation-settings:normal" transform="translate(-1030.156 172.97) scale(.02428)"/><path fill="%23000" d="M2.113.12A2.117 2.117 0 0 0 .32 3.36l1.764-2.28c.013-.017.045-.017.058 0l1.764 2.28A2.117 2.117 0 0 0 2.113.12z" paint-order="markers fill stroke"/></svg>'); } <i class="fa-brands fa-codeberg"></i>

javascript css font-awesome

回答 1 投票 0

font-awesome 相关问题

最新问题