Questions tagged [font-awesome-5]
Font Awesome 5. This tag is for questions relating to Font Awesome 5 and upgrading from previous versions.
0
votes
2answers
18 views
FontAwesome 5 Pseudo elements with webpac
I have been struggling with this for way too long and have no clue where I am going wrong.
I am trying to use fontawesome 5 in my webpack project. I have been able to use icons in html but if I try a ...
0
votes
1answer
16 views
Vis.js Network could not display icons when using fontawesome-pro-5.0.3
I recently upgrade fontawesome from version 4.7.0 to pro-5.0.3, the icons in my network chart display as blank box. It works perfectly if I change fontawesome back to 4.7.0. I put my nodes definition ...
-1
votes
0answers
25 views
Font Awesome 5 icons not working with React test (“Could not find icon” error)
I am using Fontawesome 5 free and so far I have been able to integrate with my project.
In my App.js, I have these imports (this isn't the whole file, just the relevant snippets):
import { library } ...
15
votes
11answers
22k views
fontawesome 5 font-family not work
I integrated fontawesome 5 in a project with bootstrap 4. When I recall a font via css it does not work.
with fontawesome 4 the code was as follows:
#mainNav .navbar-collapse .navbar-sidenav .nav-...
-1
votes
0answers
14 views
Same-height Font Awesome 5 icons
I am using Font Awesome 5.2 Pro to create a pagination template for tables. I am evaluating a few options for the buttons "First page" "Previous page" "Next page" "Last page".
I have been using both ...
-1
votes
2answers
47 views
Fontawesome doesn't work without this code [duplicate]
Everytime I want to use fontawesome I've to add this style to the page:
<style>
* {
font-family: fontawesome !important;
}
</style>
If not it just show a blank square , but do so i ...
1
vote
1answer
65 views
How to get a Font Awesome 5 icon as cursor
In Font Awesome 4x I managed to set the cursor as an icon by changing it into a base-64 image url. Now in Font Awesome 5 it does not work any more.
I've found this solution, but it's not working here....
1
vote
2answers
38 views
Font awesome 5 listen for unknown icons
I'm using font awesome 5 on my websites. Let's say I miss-spell a icon like this:
<i class="fa fa-map-markerzzzz"></i>
Font Awesome code must detect that it's an unknown icon as it ...
0
votes
1answer
30 views
Is it possible to rotate font awesome 5 icons on click?
I would like to rotate an fontawesome 5 icon (which is in an panel) 180 degree on click.
<div class="panel panel-default">
<div class="panel-heading">
<a class="accordion-...
1
vote
2answers
24 views
Font Awesome 5: Possible to change BACKGROUND-COLOR of icon so it doesn't bleed outside border?
I'd like to change the BACKGROUND-COLOR of a Font Awesome 5 icon. Unfortunately, when I specify the background-color it bleeds outside the icon's border.
Here is a sample:
<i class="far fa-...
0
votes
0answers
19 views
FontAwesome 5 setup in Angular 6 with Angular Materials using the <mat-icon> directive
Baseline:
Angular 6.0.3
Angular Materials 6.4.2
"@fortawesome/angular-fontawesome": "^0.1.1"
"@fortawesome/fontawesome-svg-core": "^1.2.2"
"@fortawesome/free-solid-svg-icons": "^5.2.0"
So I have ...
-1
votes
1answer
16 views
Wait for Font Awesome JS to convert i to svg before binding
I've got a bit of an issue when it comes to binding onto a Font Awesome element that is generated by Font Awesome JS <i> to <svg>.
I am trying to use tooltipster to attach a custom HTML ...
1
vote
4answers
286 views
Google Maps v3 FontAwesome5
I am trying to create a googleMap that uses dynamic fontAwesome markers
I can't seem to be able to set 'Font Awesome 5 Free' as the font to be used, though.
I can set 'Fontawsome' which works, but ...
google-maps-api-3
0
votes
1answer
30 views
installing fontawesome 5.2.0 in Asp.Net Core 2.1.0
I have installed "@fortawesome/fontawesome-free": "5.2.0" through package.json to my new project. It installs in root directory node_modules\@fontawesome\etc.
Now that I have added this to my _Layout....
-1
votes
1answer
28 views
font awesome - stack circle color change on hover
I am using the font awesome framework for the icons.
.fa-circle {
color: red;
}
.fa-times {
color: #fff;
}
.fa-circle:focus,
.fa-circle:hover {
color: #fff;
border: 2px ...
0
votes
0answers
11 views
npm @fortawesome/fontawesome-pro-webfonts package not found
I am trying to install @fortawesome/fontawesome-pro-webfonts through npm. I have set their repository into my npm config
; userconfig C:\Users\user10\.npmrc
@fortawesome:registry = "https://npm....
0
votes
1answer
165 views
How to add Fontawesome 5 to Symfony 4 using Webpack Encore
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 ...
1
vote
1answer
37 views
Targeting Font Awesome 5 svg pseudo element
I'm using font awesome 5 pseudo elements to attach an :after tag to my element like this
&:after {
content: "\f068";
font-weight:400;
color:$brandRed;
float:right;
font-family:...
0
votes
5answers
946 views
How to integrate FontAwesome 5 Pro with React?
Could someone advice me on how to integrate FontAwesome 5 Pro with React?
I know there are packages @fortawesome/react-fontawesome and for example @fortawesome/fontawesome-free-regular but is there a ...
0
votes
0answers
13 views
Use of fontawesome lates version (v.5.2) is slowing loading time of website
I am using just-released fontawesome v.5.2 in my website. It is slowing down the site for atleast 2 second. Anyone else is facing the issue. Is there any fix? I am using there CDN link below.
https://...
27
votes
4answers
21k views
Font awesome 5 on pseudo elements
In font awesome 4 you could easily apply an icon to a :before/:after element using CSS.
Is the same possible with the new font awesome 5 JS/SVG implementation? As from what i can see this requires ...
0
votes
0answers
25 views
CSS :after pseudo element content displays on <th> but not <span> [duplicate]
I'm trying to use the :after pseudo-element to display a toggle button from the FontAwesome 5 Free library. I'm doing this already on a <th> element but I cannot get it to work on a <span>...
2
votes
1answer
45 views
Different font source leaflet-awesome-marker and Leaflet-easy-button
I am using two plugins with my leaflet map: Leaflet.awesome-markers and Leaflet.EasyButton.
I am using local font made with Fontastic for icons of Leaflet.EasyButton by including the css file and ...
1
vote
3answers
2k views
Fontawesome 5 unicode
Font-awesome 5 star icon has <i class="fas fa-star"></i> and <i class="far fa-star"></i> different is fas , far and Unicode for both is f005 now i want to use it as my rating ...
0
votes
1answer
575 views
jQuery issue with replacing Font Awesome 5 icon on click?
I am trying to change a play button to be a pause button using Font Awesome 5. I don't understand why it seems to just not toggle on click. It recognizes the clicks (I tried with an alert, so it ...
1
vote
2answers
2k views
FontAwesome css content not showing
I am trying to use FontAwesome in the content of css.
It appears with the code for the icon instead of the icon. I have followed the online helps but still not working
css
@font-face {
font-...
2
votes
2answers
178 views
Font awesome icon in placeholder not showing up unless font weight set to 600
I upgraded from Font Awesome 4.4 to 5 and I went from using the downloaded files to the CDN.
The fonts work fine, but when using an icon in my search field input placeholder it not showing like I ...
0
votes
1answer
499 views
Font Awesome 5 whatsapp icon CSS style
I tried the below code to render whatsapp icon using font awesome 5:
<i style="background-color: #25d366; color: white;" class="fab fa-whatsapp "></i>
But it looks like this:
What I ...
5
votes
2answers
2k views
fontawesome 5.x setting color to icon
I can't colorize the font-awesome5 icons using these codes. I tried "fill" css property for setting color but it didn't work.
HTML Code:
<div class="container mt200 icons">
<div class="...
2
votes
1answer
444 views
FontAwesome - Choosing the correct font-family in CSS pseudo-elements
I'm using font-awesome version "Font Awesome Free 5.0.6". I'm currently confused in using the icon in CSS pseudo-elements. There are 4 kind of font-family for fontawesome : Font Awesome 5 Free, Font ...
1
vote
2answers
736 views
FontAwesome replacement on <li> tag shows empty square
Attempting to replace the bullet type on an list item tag with a Font Awesome icon but I am getting an empty square:
HTML
<ul>
<li class="testitems">List Item 1</li>
...
7
votes
1answer
1k views
Font Awesome shows square instead of icon when used directly in CSS
I am trying to change the content of a span with a FA icon directly from the CSS page but can't seem to make it work properly.
1) I have imported FA from the documentation and in the <head>
&...
-1
votes
0answers
122 views
Some of Font-awesome icons doesnt show [duplicate]
I have a silly souetion about using Font Awesome in CSS.
Some of icons dont display.
HTML:
.div1 {
width: 50px;
height: 50px;
}
.div1::before {
font-family: "Font Awesome 5 Free";
...
0
votes
2answers
44 views
Change all font awesome 5 icons with a specific class to another FA icon - JS/SVG
Lets say i have 3 FA icons:
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
I want to change all of those to:
<i ...
0
votes
0answers
34 views
FontAwesome displaying boxes when used with content in CSS [duplicate]
I'm having a small issue where the FontAwesome icons are not showing up while being used within content.
I have the code inside a "promote.css" file while my html code is in "promote.html".
The ...
-1
votes
0answers
12 views
Fontawsome 5 size
I own a pro license for FontAwesome 5. I have a static HTML site and I dont want to use the CDN for fontawesome5. I downloaded the files and copied the all.css into my project and reference it in the ...
0
votes
0answers
30 views
Fontawesome icons not loading, but only after window resize
I'm using fontawesome (latest version) icons in pseudo elements. They work fine except popup menu. There are several icons and the are not displayed (only the "no icon" default symbol) till I resize ...
0
votes
0answers
25 views
I can't apply Facebook or Instagram icons in Font Awesome 5 as a content [duplicate]
I can set a font awesome icon with the following style, which works fine:
.my-title:before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f568";
}
But I can't set ...
0
votes
0answers
32 views
Using Font Awesome with NPM & Webpack
I'm new to NPM and Webpack and am struggling to implement the latest Font Awesome Pro (5.1.1).
I've followed the instructions for installing through NPM, including creating the .npmrc file and have ...
1
vote
1answer
41 views
Does not working solid icon which is only available in solid for Photoshop
I am using font awesome latest Version 5.1.1. Does not work solid icon in Photoshop. I have realized. Does solid icon working which is available in Regular & solid. Does not working solid icon ...
0
votes
4answers
36 views
CSS, How to move <i> downwards or upwards without affecting inline text?
This is very hard to explain in a title, but I will show you in a jsfiddle
https://jsfiddle.net/myv50428/2/
Basically I want to move the envelope icon downwards, but not affect the test.
So it ...
0
votes
1answer
90 views
Silktide cookie consent 3.0.3 conflict with Font Awesome 5.0.2 using CSS Pseudo-elements
There seems to be a bug when using this these 2 libraries together and trying to use CSS Pseudo-elements.
I have created a demo here: http://tappetyclick.com/fontawesomebug/. The text in the anchor ...
14
votes
3answers
3k views
Upgrade process for fontawesome from 4 to 5
We contributed to font-awesome 5 (yea), and we are looking from moving from our existing icons (Symbol set) to font-awesome. Will the naming of icons and usage of font-awesome 5 be backwards ...
0
votes
0answers
19 views
FontAwesome 5 - SVG&JS - pseudo elements [duplicate]
Trying to use new Font Awesome 5 in SVG&JS combination in ::before element
Already tried to find solutions but it still not work correctly.
In head i got script activating the function and ...
2
votes
2answers
330 views
Font Awesome 5 and Angular 5
I was using font-awesome npm package (which is Font Awesome 4.7 version) but I want to upgrade to Font Awesome 5. I've install the following packages :
"@fortawesome/angular-fontawesome": "^0.1.1",
"@...
0
votes
1answer
14 views
Icons are replaced by animating ? &?
Setup: Asp.Net Mvc 5 + Bootstrap 3 + FontAwesome 5 Pro JS+SVG all.js (no shims)
Code/layout.cshtml:
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,...
1
vote
2answers
91 views
Font Awesome icons are not working inside CSS [duplicate]
I have included the CSS file in my webpage like this:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
After that, I apply the following CSS:
th:after {
...
0
votes
1answer
28 views
Font Awesome 5 treatment of embedded icons in form input fields - Formatting is off vs V4.7
I have the following html/php code in a laravel blade template that renders a font awesome 4.7 input field:
<div class="form-group col-md-12">
{!! Form::text('locName', old('locName'),
...
0
votes
1answer
941 views
Use Font Awesome (5) icon in input placeholder text
I've come across many ways to solve this using Font Awesome < 5, but I can't seem to solve this in any way using Font Awesome 5.
This is how many resources point to adding a Font Awesome icon in ...
1
vote
2answers
785 views
Font Awesome 5 Crushing Site Performance
Has anyone experienced poor site performance when including Font Awesome 5? The difference between including it and not is night and day, like, 15 seconds difference in page loading for me.
I'm ...
