标签: font-awesome-5
Instagram的SVG of FontAwesome 5的渐变
升级到FontAwesome 5后,我无法为FontAwesome的svgs着色.
这是我的例子:https:
????? //codepen.io/shadrix/pen/GygdZr
如果它像这里一样工作应该很棒:????? https ://codepen.io/immad-hamid/pen/jVNvQO(注意:他使用FontAwesome 4).
推荐指数
解决办法
查看次数
<li>标签上的FontAwesome替换显示空方块
尝试使用Font Awesome图标替换列表项标签上的项目符号类型,但我得到一个空方块:
HTML
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
margin: 0 5px 0 -15px;
color: #004d00;
display: inline-block;
}CSS
<script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>我知道字体库正在加载,因为我能够使用<i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li>并正确呈现字体(虽然没有正确设置样式).
推荐指数
解决办法
查看次数
Font Awesome 5 图标的类绑定更改不会影响图标
在 Font Awesome 5 从 4.7.0 的升级过程中，我注意到我为标签提供的任何类绑定都<i>无法像以前那样发挥作用。
想象一下带有类绑定的以下元素：
<i class.bind="iconClass"></i>
iconClass并想象存在的初始价值'fas fa-cog'。iconClass当更改to的值时'fas fa-ship'，图标不会更新为新设置的图标类。它将仍然是一个齿轮图标。
我相信发生这种情况是因为 Font Awesome 5<i>用<svg>标签替换了标签，并且没有正确复制类绑定，因此不会触发图标更改。
在下面的示例中，绑定的类在两秒后发生更改来说明问题，请参阅此 GistRun以获取该问题的示例。参见app.html和app.js的实现。它还包含一个肮脏的解决方法。
这种行为可以/应该如何实施？
推荐指数
解决办法
查看次数
FontAwesome - 在CSS伪元素中选择正确的font-family
我正在使用font-awesome版本"Font Awesome Free 5.0.6".我目前很困惑使用CSS伪元素中的图标.有4种字体家庭为fontawesome: ,Font Awesome 5 Free,,Font Awesome 5 SolidFont Awesome 5 BrandsFont Awesome 5 Regular
这是HTML:
<h1>Hello</h1>
情况1
我用这个图标:https://fontawesome.com/icons/twitter？style = brands
如你所见,它是一个brands图标,所以font-family:Font Awesome 5 Brands
h1:before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
content: "\f099"; /* TWITTER ICON */
font-family: "Font Awesome 5 Brands";
font-weight: 400;
}
有用!
案例2
我用这个图标:https://fontawesome.com/icons/phone？style = solid
如你所见,它是一个solid图标,所以font-family:Font Awesome 5 Solid
h1:before …推荐指数
解决办法
查看次数
azure devops 中的 fontawesome pro
有谁能够使用 fontawesome pro 进行 CI 构建吗？在本地，我的构建和 fontawesome pro 可以正常工作，因为我已经运行了这些命令
npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && \
npm config set "//npm.fontawesome.com/:_authToken"
但是我的 CI 构建失败并显示以下消息
npm ERR! 404 Not Found: @fortawesome/fontawesome-pro@5.7.1
我尝试设置 .npmrc 文件，但没有帮助。我还尝试在服务连接中添加 fontawesome 的存储库。
continuous-integration azure npm azure-devops font-awesome-5
推荐指数
解决办法
查看次数
减少或消除页面加载时 SVG 字体闪烁
我们刚刚购买了专业版并切换到 SVG，因为图标看起来更好了。
然而，我们在加载图标时每个页面上都存在一些闪烁问题。
我通过确保图标加载时不会调整页面大小，稍微减轻了它的不和谐性质（就像之前带有文本的图标将在容器顶部加载文本一样，然后图标加载将向下移动）。
但它仍然有点令人恼火。CSS 版本不会出现这些问题。
具体来说：
- 有没有什么办法可以最大限度地减少这种影响，我没有想到
- 我们可以在加载页面之前强制加载 svg 吗？对 font Awesome 的引用是一个 javascript 文件，但我已经将其放入
<head>顶部。 - 我们可以延迟页面加载直到它准备好吗？
- 是否有一种混合解决方案，它最初加载 CSS 版本，然后在加载 svg 版本时替换它们？
推荐指数
解决办法
查看次数
使用 npm 安装时 Fontawesome 许可证抛出错误
根据fontawesome 的文档，我正在尝试安装 fontawesome 5 的专业版。我创建了一个 .npmrc 文件，其中提到了许可证和注册表。
现在我正在尝试运行npm install --save-dev @fortawesome/fontawesome-pro。它抛出错误 Bearer token value is not a legal HTTP header value。我附上了一张快照。
添加文件夹结构：
谢谢
推荐指数
解决办法
查看次数
Jest 未能测试导入 FontAwesomeIcon 的组件
我正在尝试使用 Jest 和 react-test-renderer 测试一个简单的功能性 react-native 组件。将 FontAwesomeIcon 组件导入我的组件后，我的测试失败并显示以下内容：
FAIL src/BudgetLog/components/TransactionList/__tests__/TransactionList.test.js
? Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" …推荐指数
解决办法
查看次数
使用 angular-fontawesome 和 font-awesome 5 时找不到 FaIconLibrary
尝试@fortawesome/angular-fontawesome在我的 angular 7 应用程序中使用时出现以下错误：
node_modules/@fortawesome/angular-fontawesome/angular-fontawesome"' has no exported member 'FaIconLibrary
我按照文档并以这种方式初始化模块：
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
(...)
@NgModule({
declarations: [
AppComponent
],
imports: [
(...)
FontAwesomeModule,
(...)
],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(library: FaIconLibrary) {
library.add(...icons);
}
}
这是我使用的确切版本：
"@angular/core": "7.2.2",
(...)
"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-pro": "^5.11.2",
"@fortawesome/fontawesome-svg-core": "1.2.21",
"@fortawesome/free-brands-svg-icons": "5.10.1",
"@fortawesome/free-regular-svg-icons": "5.10.1",
"@fortawesome/free-solid-svg-icons": "5.10.1",
非常感谢您的帮助！蒂埃里
推荐指数
解决办法
查看次数
Font Awesome 5，为什么 Instagram 图标不见了？
为什么这里没有 Instagram 图标
.share{
display:inline-block;
color:#0099cc;
font-size:25px;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<i class="fab fa-facebook-square share"></i>
<i class="fab fa-instagram-square share"></i>
<i class="fab fa-twitter-square share"></i>推荐指数
解决办法
查看次数
标签 统计
font-awesome-5 ×10
font-awesome ×7
css ×4
html ×2
javascript ×2
npm ×2
svg ×2
angular ×1
aurelia ×1
azure ×1
azure-devops ×1
fonts ×1
gradient ×1
node.js ×1
react-native ×1