Questions tagged [font-awesome]

1

votes
3

answer
629

Views

How would I fix indentation on an font awesome icon? [duplicate]

This question already has an answer here: Text indent after the first line in a paragraph 4 answers How do I fix the indentation whilst using this font awesome icon as list to display advantages? This is my HTML: No upfront payment is required to access the solution. A Nominee and Supervisory fee...
Adam
1

votes
2

answer
1.3k

Views

Font Awesome not showing - Avada theme (Wordpress) - adding fa class

I migrated my wordpress site from a shared host to Digitalocean and everything went well except for the Font Awesome icons. They are showing as blank squares on the live site. I found the issue to be the required 'fa' class for the icons is not showing up. I am using the Avada theme and am brand ne...
shaiden
1

votes
3

answer
39

Views

Disabling color on font awesome icon

I just added a href tag to my font awesome icon, which alters its color like so: Is there a way to remove this link color?
rwd
0

votes
1

answer
18

Views

How to add a font awesome icon into a haml form submit button

I'm currently trying to add a search font-awesome icon into my forms submit button, here's what I've done so far: = simple_form_for :search, url: search_products_path, method: :post, html: { class: 'mx-auto'} do |f| = f.input :code = f.submit 'Search', :class => 'btn btn-success' do %i.fa.fa-search...
Alex Yates
1

votes
3

answer
69

Views

Align text to font awesome icons

I am trying to vertically align the text beside my FontAwesome icons. I can do it manually with a padding-left, but that seems wrong to do. Is there an easier way to do this? A/C service Aut-gear service Bil-leasing Bil-salg Bilsyn BMW Keyreader BMW-testudstyr (ISTA) Digital servicebog Dækhotel Ele...
McDuck4
0

votes
0

answer
3

Views

Replace images with font awesome

I'm trying to change the code for displaying images for reviews. The previous code has 5 images of stars. The first image has one star, the next two and so on. The width of each image is the same so the alignment is always correct. The code that was used is $p_stars = ''; The above results in a stri...
user3052443
1

votes
2

answer
1.3k

Views

Right way to use fontawesome with angular 4 projects

I want to use fontawesome in my angular4 projects. I use like below npm install font-awesome --save In style.scss $fa-font-path: '../node_modules/font-awesome/fonts'; @import '~font-awesome/scss/font-awesome.scss'; When i do ng serve it works fine. But in production build, font awesome icons are no...
Hacker
1

votes
3

answer
734

Views

Angular build can't find installed Font-Awesome node_module

Whenever I build my project using ng build --prod I receive the following error: ERROR in ./src/styles.scss Module build failed: ModuleBuildError: Module build failed: Error: Can't resolve '~font-awesome/css/font-awesome.css' in '/app/src' styles.css uses @import '~font-awesome/css/font-awesome.cs...
Marcus Lind
1

votes
0

answer
30

Views

Font-Awesome scss compiling badly

I imported font-awesome to a scss file. When I compile that scss file to css something goes wrong. Instead of .fa-sun-o:before { content: '\f185'; } I see .fa-sun-o:before { content: ''; } How can I fix it? The compiler I use is Gulp-Sass
user2657943
1

votes
0

answer
219

Views

Using icon font (Fontawesome) in HTML select

I'd like to show icons from the Fontawesome font in an HTML select. I'm using this CSS for the select: select { font-family: 'FontAwesome', Arial; } EDIT: Here is the HTML for the select:  Deny  Accept  Reject  Accounting In Chrome it works fine, but Firefox doesn't render the icons when...
Fel
1

votes
2

answer
336

Views

How to vertically align center a Font-Awesome icon with a line of text in Bootstrap 4?

I am trying to align a Font Awesome icon vertically center to a small block or line of text. Here's a picture of what I'm trying to achieve: This is the look I'd like to achieve The part of my webpage I am working on is seen here:This is the look my code currently produces. Note the unaligned FA ico...
Joseph Romo
1

votes
0

answer
279

Views

What is the best way to target a FontAwesome Icon using JS and Event Bubbling

The new FontAwesome 5 version, while using their 'SVG with JS', makes the icons look extremely clean. The side effects is that it is extremely difficult to find a fool-proof way of targeting it using event bubbling/delegation. Sometimes you will click on it and get the path node and other times you...
Brandon Benefield
1

votes
1

answer
899

Views

Injected Font-Awesome icons to the DOM with Javascript do not display until page refresh

I'm configuring a page using Javascript to select and inject different icons depending upon JSON data. Sometimes one or more of the injected icons does not appear until the page has been refreshed. I'm finding Firefox fails on all icons, but Chrome is ok after a refresh. If I inspect the DOM I can s...
roskelld
1

votes
3

answer
517

Views

Icon Placeholder with FontAwesome5 and Bootstrap4

Does anyone know how to use a FontAwesome5 icon as a placeholder in a Bootstrap4 input? I've seen several solutions for previous versions, but none seem to work with the latest versions. Here's what I've got so far:
lgants
1

votes
1

answer
535

Views

font awesome v5 :before not working [duplicate]

This question already has an answer here: FontAwesome 5 replacement on tag shows empty square 2 answers For some reason I can't seem to get this working. In my css I have: .styled-ul-list.media-nav { li:before { content: '\f02e'; font-family: 'Font Awesome 5 solid'; } } and then i have added this...
Sandra Willford
1

votes
0

answer
777

Views

Loading indicator in Angular 5 input component gets replicated

I would like to display a loading indicator as my autocomplete input goes to get suggestions from a web service. I have the following HTML: {{ item.value }} With the following TypeScript behind it: loading = 0; myControl = new FormControl(); suburbList: KeyValuePair[] = []; constructor(private Data...
Molloch
1

votes
0

answer
177

Views

Inline Font Awesome 5 Icon in SVG

I have an svg button where I need to include the text + Upload. For the plus I would like to leverage the Font Awesome 5 plus icon. I'm using it inside a text tag and while it does render, it's showing as a solid font style by default. Is there a way to indicate which font set to use (light or regul...
Runicode
1

votes
1

answer
740

Views

Font awesome icons within anchor tags not clickable. Is there a way to do it?

I can't seem to make my font awesome icons clickable. Placing them inside anchor tags was the most popular response to others who have had this problem but its not working for me. If i click the background within the anchor tags and around the icon, it shows the dropdown menu i want, but if i click...
Ken Thomas
1

votes
0

answer
409

Views

Fontawesome 5 Skip replace with SVG for some icons

Is it possible to skip replace with SVG only for specific icons? for example containing some class? Or overwrite replace function to add this possibility. I have a case with 3rd party lib for linux dist icons, I would like to replace with SVG all icons coming from fontawesome packages but skip it fo...
vrael560
1

votes
1

answer
3k

Views

Angular - Change Font Awesome icon color on click

I created a component named 'like' with the following HTML: When I click on the icon, it should change the variable 'isActive' and consequently the color of the icon should also change. Here is the .ts: onClick() { this.isActive = !this.isActive; } CSS: .fa-heart { color: #ccc; } .fa-heart.active {...
Vinicius
2

votes
2

answer
1.5k

Views

FontAwesome 5 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 List Item 1 List Item 2 List Item 3 List Item 4 List Item 5 CSS ul { list-style: none; } .testitems { line-height: 2em; } .testitems:before { font-family: 'FontAwesome'; con...
Elcid_91
1

votes
1

answer
355

Views

Render unicode list in vue.js

Im converting an old project to Vue.js, and Im having trouble rendering a select list that contains Font Awesome icons inside it. My code was...  fa-address-book  fa-address-book-o etc etc etc Which works fine in the old project using bootstrap and Jquery. But when I put this list into Vue.js...
Kylie
1

votes
0

answer
60

Views

components-font-awesome and angularjs local testing

I am trying (in vain) to get fonts working locally. I have installed https://github.com/components/font-awesome and there is a line at the bottom of the page that states: Here is the important part, the default font folder is on different path with the compiled bower file. We need to move the font f...
r3plica
1

votes
0

answer
292

Views

Fontawesome 5, Missing fa-brands.svg?

I tried Fontawesome 5 by replacing the old ones. I copied already the files from the folder web-fonts-with-css to my practice folder-> css. and link my page to: And included thefonts (from Fontawesome) folder to my work folder. but from the fonts folder (extracted Fontawesome 5.0.8) I didn't see...
RoCk Vangeance
1

votes
1

answer
82

Views

Is it possible to use a FontAwesome v5 icon within FontAwesome v4.7?

Currently using Fontawesome v4.7 but there is an icon (fa-fire) which has been updated and is included within Fontawesome 5 package. Is it possible to update the css file or the webfonts files without downloading the whole v5 package and removing/adding files?
Matt Bristow
1

votes
2

answer
71

Views

Showing dummy pic if picture it not available

I am trying to show a dummy image from - Font awesome- when the picture is not set. You can see my code it shows the image if there is one but when there isn't one it needs to set the dummy pic from awesomefont. tried pasting this in the else but that isn't working. can anyone please help me? updat...
helpmeifyoucangg
1

votes
1

answer
60

Views

How to change the collapse menu icon with JS?

I have a main menu (collapse) that uses Bootstrap 3.3.7 and Font Awesome 5.0.1 What I am looking for : When the menu is closed, a 'plus' icon is displayed. When the menu is open, a 'minus' icon is displayed. The 'plus' icon is displayed on the menu but does not change. I think there is a problem wit...
steeve61
1

votes
0

answer
59

Views

Fontawesome loading but not displaying properly Play Framework Firefox

To start, I am new to Play framework and Scala, but not Java. I have confirmed that this is not an issue in Google Chrome. first just tried copy-pasting the cdn, then realized I needed to serve the actual fonts, so I cloned from FontAwesome's repo. Below are the directory tree and the cdn version as...
ThisGuyCantEven
1

votes
1

answer
148

Views

Font Awesome Icons: common baseline

I'm using Font Awesome 5.0.10 (SVG + JS) to render a few social media icons. If I use the squared versions, they all share a common baseline and thus are aligned, but the non-squared are not, as you can see by looking at the distance between the svg box and the path in icons like these: https://font...
CharlesM
1

votes
2

answer
40

Views

I would prefer icon to be up a little further and balanced

I have an issue about the position of an icon beside navbar menu. I would prefer the icon to be up a little bit further and balanced. I'm getting the icon from font awesome. li a i { font-size:1em; color: darkseagreen; margin:0; } ABOUT MEDIA NEWS ATHLETES PRODUCTS
Said Ibrahimli
1

votes
3

answer
218

Views

How to make font awesome icon appear at centre inside a div

I Googled for the above mentioned problem, but I still require the help from the stack overflow community. In my login form, I am using font awesome icon. I have 2 input boxes for username and password respectively. I want to display fa-user-cirle icon on top of the username input. The login form is...
Anil
1

votes
1

answer
348

Views

Adding Font Awesome 5 icon from Angular 5 component

I am using Font Awesome 5 (angular2-fontawesome - package) with Angular 5. What I am trying to do is to import fa icon from component. Html: {{introText}} ... Component: introText = 'Welcome'; @HostListener('window:resize', ['$event']) onResize(event) { this.introText = window.innerWidth < 1...
Vasilis Greece
1

votes
0

answer
162

Views

Add Font Awesome icon with label_tag

How do I add a Font Awesome icon like to the following {{form.date.label_tag}} which uses widget_tweaks? I know generally you'd just do it like this Add but I haven't had any luck. It just outputs the 'Date added:'
Reez0
1

votes
1

answer
593

Views

fontawsome angular only class fa working not fas or

I've integrated fontsawsome in my angular project like styles.scss $fa-font-path: '~font-awesome/fonts'; @import '~font-awesome/scss/font-awesome'; it doesn't work it works so what's the matter? UPDATE I found the problem with npm install fontawsome you get the 4.7 version for the 5 version you sh...
Whisher
1

votes
1

answer
426

Views

Service Workers Angular load assets with version parameter in URL

I have an angular 6 app with an: '@angular/pwa': '^0.6.0', '@angular/service-worker': '^6', I am getting a nice serivce worker, but me resources with an url GET parameter vor the version are not handled by the service worker in case of an offline situation: GET 504 .../fontawesome-webfont.af7ae505a9...
1

votes
0

answer
136

Views

Webpack 4.6 not rendering with bootstrap 4.1

I have a project in ASP.NET Core 2 and have setup WebPack (see below). After building bundle.js (main.js in the example below), all seems OK but the website is not working (inspecting the element, there is no CSS at all). Package.json { 'version': '1.0.0', 'name': 'cloudcrm', 'private': true, 'scrip...
Gezero
1

votes
1

answer
38

Views

Font Awesome unresponsive to touch in Cordova Android

I am using Cordova to build an Android app. Somehow, the symbols displayed with Font Awesome are very unresponsive to touch on an Android phone. I have to touch the symbols many times (3-10 on average) before the event is fired once: I tried changing 'onclick' to 'ontouchend' to no avail. The touch...
1

votes
1

answer
185

Views

Add font awesome icon to each instance on a C3 Chart legend

I would like to add a different Font Awesome icon to each instance on a C3 Chart legend. So far it looks like I have to use the unicode and I have found how to do it for a D3 chart but am unsure how to transfer that info. My code looks like this... var eventChart = c3.generate({ bindto: '#eventChar...
Auzziland
1

votes
0

answer
207

Views

Ionic 3 : Upgrade fontawesome 4 to 5

I build an app in Ionic 3 and currently I use fontawesome 4 to display some icons like this : But know, I want to upgrade my version to 5. I want to keep use of balise. But I can't find how to upgrade the version ... I tried this with npm : https://fontawesome.com/how-to-use/use-with-node-js I ru...
V. Pivet
1

votes
0

answer
140

Views

'Plugin.Iconize.Fonts.FontAwesomeCollection' threw an exception

I'm trying to use the Xam.Pugin.Iconize.FontAwesome nuget package with my xamarin.forms (shared project) app - targeting Android only. The app compiles fine, but when running the app, I get the following exception: System.TypeInitializationException: The type initializer for 'Plugin.Iconize.Fonts.Fo...
lepton

View additional questions