font-awesome-5

问题 I want to add Font Awesome 5 to my Symfony 4 project, this is what I did : I added font awesome to my project using yarn : yarn add --dev @fortawesome/fontawesome-free I imported font awesome in my main scss file (assets/css/app.scss) : @import '~@fortawesome/fontawesome-free/scss/fontawesome'; my webpack encore configuration include my scss and js files : .addEntry('js/app', './assets/js/app.js') .addStyleEntry('css/app', './assets/css/app.scss') I compiled : ./node_modules/.bin/encore dev

问题 I'm using font awesome 5 in a react.js project, and having trouble make the icon switch in a conditional statement. Here's the sample code: !isRecording && <div style={styles.recordButton} onClick={e => this.record(e)}> <span className="fa-layers fa-4x"> <div><i className="fas fa-circle " style={{color: Colors.mainOrange}}></i></div> <div><i className="fa fa-microphone fa-inverse" data-fa-transform="shrink-6"></i></div> </span> </div> || <div style={styles.recordButton} onClick={e => this

问题 I've tried to mimic the "icon left - text right" boxes from https://fontawesome.com/ by taking over the style sheets. everything works fine until I apply fa-spin to an icon (see the sample). The icon is then misplaced and not centered. I was just able to fix the issue by creating a clone of .g-im-icon -> .g-im-icon-for-spin and playing around with the top, left and transform styles. however I was wondering if there would be a generic solution that would work for both spinning and non spinning

问题 What am I doing wrong? <ul> <li class="facebook"> Facebook</li> <li><i class="fab fa-twitter-square"></i> Twitter</li> </ul> li.facebook:before { content: "\f09a"; font-family: FontAwesome; } li { list-style:none; } JSFiddle : https://jsfiddle.net/labanino/nwodoo32/ 回答1: UPDATE 2: TL;DR The font-family is wrong. use font-family: "Font Awesome 5 Brands" For Font Awesome 5 this must be one of the following: Updated because you use css webfonts: For method Web Fonts with CSS Free font-family:

问题 I have en issue with angular and font awesome. On first generation of list of icons suddenly all css class based icons are translated to svg. It affects only solid icons. for example : <i class="fas fa-2x fa-minus-square"></i> is translated somehow to <svg _ngcontent-c16="" class="svg-inline--fa fa-minus-square fa-w-14 fa-2x" ng-reflect-ng-class="fas fa-2x fa-minus-square" aria-hidden="true" data-prefix="fas" data-icon="minus-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0

问题 Is it only me that cannot render bitcoin and facebook icons in version 5.0.8 ? <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css"> <i class="fa fa-btc"></i> <i class="fa fa-bitcoin"></i> <i class="fa fa-facebook"></i> <i class="fa fa-facebook-f"></i> 回答1: You also need to use the brands.css stylesheet in font-awesome 5.0.8. Additionally, you need to make sure your class names are up to date. Try the snippet below: <link rel=

问题 Is it only me that cannot render bitcoin and facebook icons in version 5.0.8 ? <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css"> <i class="fa fa-btc"></i> <i class="fa fa-bitcoin"></i> <i class="fa fa-facebook"></i> <i class="fa fa-facebook-f"></i> 回答1: You also need to use the brands.css stylesheet in font-awesome 5.0.8. Additionally, you need to make sure your class names are up to date. Try the snippet below: <link rel=

问题 I want to use a Font Awesome 5 icon as card background image using Bootstrap-4! I tried everything what I found from the internet but nothing worked. I'm using Angular2 (v8) along with Bootstrap 4. 回答1: The following code worked for me. I've simplified what I use but you still get a font-awesome icon as background and you can put text on top of it: HTML: <div class="container-fluid"> <div class="row"> <div class="col-md-4 col-sm-6 d-flex"> <div class="class-box"> <div class="bg-primary"> <i

问题 I'm working on a little project to learn more about Javascript so I can work on svg animations in the future. Now I'm working on a button that will change his input when you click on it. circle = document.getElementById('circle'); $remove = document.getElementById('remove'); remove.style.display = "block"; $undo = document.getElementById('undo'); undo.style.display = "none"; circle.onclick = function() { remove.style.display = "none"; undo.style.display = "block"; } .circle { width: 200px;

问题 When I enabled data-search-pseudo-elements it causes a 100x+ slowdown in the performance of rendering rows with icons within a grid. Whats strange is that the grid virtualizes the rows, so really only 100 rows may be visible. Without this setting render time is .5 seconds. With this setting it is >30 seconds and often crashes the browser altogether. The icons in question aren't from pseudo elements, but I enabled this feature in my index.html for a targeted use in another part of the app. Is