标签: font-awesome-5
fontawesome 5 font-family无法正常工作
我fontawesome在一个带有bootstrap 4的项目中集成了5个.当我通过css它回想起一个字体时不起作用.与fontawesome 4代码如下:
#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
float: right;
content: '\f107';
font-family: 'FontAwesome'; }
我试图更改字体名称,但它不起作用
font-family: 'Font Awesome 5 Free'
推荐指数
解决办法
查看次数
伪元素上的字体很棒5
在字体真棒4中,您可以使用CSS轻松地将图标应用于:before /:after元素.
新的字体真棒5 JS/SVG实现是否可能相同？从我可以看到,这需要相关标签存在于html中,这并不总是实用的,例如你有一个CMS,并希望将图标应用于所有用户创建的内容<li>元素
我知道在FA5中你仍然可以使用旧的css/webfonts但是如果在使用JS的推荐方法中提供相同的功能会很好
推荐指数
解决办法
查看次数
字体真棒5与Angular
如何在Angular(2+)中使用font-awesome 5？
我试过在组件中添加它:
import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
...
constructor(){
fontawesome.library.add(faChevronLeft, faChevronRight);
}
然后在HTML中:
<span class="fa" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>
但这给了我一个圆圈中闪烁的问号.
推荐指数
解决办法
查看次数
如何使用Webpack Encore将Fontawesome 5添加到Symfony 4
我想将Font Awesome 5添加到我的Symfony 4项目中,这就是我所做的:
- 我使用yarn为我的项目添加了字体真棒:
yarn add --dev @fortawesome/fontawesome-free - 我在我的主scss文件(assets/css/app.scss)中导入了很棒的字体:
@import '~@fortawesome/fontawesome-free/scss/fontawesome'; - 我的webpack加装配置包括我的scss和js文件:
.addEntry('js/app', './assets/js/app.js') .addStyleEntry('css/app', './assets/css/app.scss') - 我编译:
./node_modules/.bin/encore dev
一切似乎都没问题,但是当我尝试在我的视图中使用字体真棒时,我只会得到一个方形图标.生成的app.css文件似乎没问题,因为我可以看到字体很棒的图标定义,例如:
.fa-sign-out-alt:before {
content: "\F2F5";
}
似乎缺少'内容'部分,我想是因为没有加载字体...我是否需要添加一些内容来加载webfonts？我试图在我的app.js资产文件中添加字体awesome js,但它不会改变任何东西.我还尝试在我的webpack加装配置中添加自定义加载器(如https://github.com/shakacode/font-awesome-loader/blob/master/docs/usage-webpack2.md#setup-for-webpack-2)我也尝试清除缓存,结果相同......
任何的想法？
推荐指数
解决办法
查看次数
fontawesome的升级过程从4到5
我们为font-awesome 5(yea)做出了贡献,我们正在从现有的图标(符号集)转变为字体 - 真棒.图标的命名和font-awesome 5的使用是否会向后兼容font-awesome 4.7？
IE: Should we go to 4.7 now, and have very easy upgrade to 5.0?
OR should we hold off until font-awesome 5 comes out?
推荐指数
解决办法
查看次数
字体真棒5捆绑通过NPM
我试图通过webpack仅捆绑所需的Font Awesome 5图标,但DOM中的图标不会被替换.
我已从文档中添加了所有必需的包:
Run Code Online (Sandbox Code Playgroud)yarn add -D @fortawesome/fontawesome yarn add -D @fortawesome/fontawesome-pro-solid yarn add -D @fortawesome/fontawesome-pro-regular yarn add -D @fortawesome/fontawesome-free-brands包括以下自定义JS:
Run Code Online (Sandbox Code Playgroud)"use strict"; import fontawesome from '@fortawesome/fontawesome'; import faCheck from '@fortawesome/fontawesome-pro-regular/faCheck'; fontawesome.icon(faCheck); function iconsDoneRendering () { console.log('Icons have rendered'); // No output in console } fontawesome.dom.i2svg({ callback: iconsDoneRendering, })HTML模板:
Run Code Online (Sandbox Code Playgroud)<head> <link rel="stylesheet" href="/css/app.css?v2.1.4"> <!-- contains fa-svg-with-js.css --> </head> <body> <ul class="fa-ul"> <li><span class="fa-li"><i class="far fa-phone"></i></span>List item 1</li> <li><span class="fa-li"><i class="far fa-check"></i></span>List item 2</li> </ul> <script src="/js/app.js?v2.1.4"></script> </body> …
推荐指数
解决办法
查看次数
Font Awesome在CSS中直接使用时显示正方形而不是图标
我试图span直接从CSS页面更改带有Font Awesome图标的a的内容,但似乎无法使其正常工作.
1)我从文档中导入了FA <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
2)我的HTML看起来像这样:
<span class='myClass'>Movies</span>
3)现在让我说我想直接从CSS页面用图标更改跨度的内容.
我的css目前看起来像这样,但它不起作用,它给了我一个正方形而不是图标.
.myClass {
visibility: hidden;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: '\f008';
visibility: visible;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'>Movies</span>有趣的是,它看起来像是在使用一些图标.如果我测试content: '\f007';它的工作原理.知道为什么吗？
(如果你想知道我为什么要直接在CSS中更改图标,那是因为我正在使用媒体查询,所以我不能直接在HTML页面中添加它)
推荐指数
解决办法
查看次数
使用FontAwesome 5.0 SVG Framework时在图标之间切换
我希望能够在使用新的FontAwesome SVG框架时在Javascript中切换图标.
以前在旧的WebFont方法中,这是通过切换或更改标记上的类来实现的,但是由于这些现在在源代码中呈现为SVG,因此不再有效.
有没有办法做到这一点,而无需在源代码中呈现两个SVG图标并使用其他类/ CSS来切换显示？
推荐指数
解决办法
查看次数
我在哪里可以找到 FontAwesome 免费包中图标的对象名称？
FontAwesome是一组图标库。在他们的使用文档中，他们写了一个例子，你可以通过从free-solid-svg-icons包中导入咖啡图标的对象来使用他们的咖啡图标，如下所示：
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
const element = <FontAwesomeIcon icon={faCoffee} />
ReactDOM.render(element, document.body)
查看FontAwesome Coffee Icon 文档，我看不到咖啡图标包含在哪个包中，或者它的对象名称是什么。我们从示例代码中知道它的对象名称是faCoffee并且它包含在@fortawesome/free-solid-svg-icons包中，但是其他 5,365 个图标中的任何一个呢？
问：如何找到 FontAwesome 图标的 React 对象名称，以及它包含在哪个 React 包中？
推荐指数
解决办法
查看次数
使用NPM安装Font awesome 5
我正在使用Angular(6)应用程序,我正在尝试使用FA图标,并且没有运气下拉.我成功使用了FA(4)图标,例如:
<i class="fa fa-align-justify"></i>
但是:无法正常工作,我正在使用此命令安装FA
npm install font-awesome --save
来自 package.json
在node_modules文件夹中,我可以看到FA.css,但它说Font Awesome 4.7.0 ...
在angular.json文件中,我引用了FA:
"node_modules/font-awesome/css/font-awesome.min.css",
我红了很多帖子就像那个 如何使用通过NPM安装的字体awesome 5
我还需要做什么？
推荐指数
解决办法
查看次数
标签 统计
font-awesome-5 ×10
font-awesome ×7
angular ×2
css ×2
html ×2
fonts ×1
javascript ×1
npm ×1
reactjs ×1
svg ×1
symfony4 ×1
upgrade ×1
webpack ×1