Questions tagged [font-awesome]

Font Awesome is an iconic standalone vector font, initially developed for use with the Twitter Bootstrap front-end framework.

Filter by
Sorted by
Tagged with
30 votes
3 answers
31k views

Font Awesome 5 on pseudo elements shows square instead of icon

I am trying to change the content of a span with a Font Awesome 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 <...
nsayer's user avatar
  • 799
31 votes
8 answers
45k views

Li item on two lines. Second line has no margin

I'm currently working on an unordered list containing list items with taglines. I'm having a problem concerning one list item, which is long enough to take up two lines (See image) I want it so that ...
Kevin Groen's user avatar
8 votes
3 answers
11k views

Font Awesome 5 shows empty square when using the JS+SVG version

Attempting to replace the bullet type on an list item tag with a Font Awesome icon but I am getting an empty square: ul { list-style: none; } .testitems { line-height: 2em; } ....
Elcid_91's user avatar
  • 1,603
32 votes
6 answers
107k views

Font Awesome 5, why is 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-...
happycoding's user avatar
88 votes
10 answers
83k views

How to know if a font (@font-face) has already been loaded?

I'm using Font-Awesome, but while the font files are not loaded, the icons appear with . So, I want these icons to have display:none while files are not loaded. @font-face { font-family: "...
Shankar Cabus's user avatar
12 votes
1 answer
13k views

Font Awesome 5 Choosing the correct font-family in pseudo-elements

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 Awesome 5 Solid, Font Awesome 5 Brands, Font Awesome 5 ...
Marcel Angir's user avatar
272 votes
15 answers
302k views

How to center text vertically with a large font-awesome icon?

Lets say I have a bootstrap button with a font-awesome icon and some text: <div> <i class='icon icon-2x icon-camera'></i> hello world </div> How do I make text appear ...
Boycott Russia's user avatar
421 votes
24 answers
1.2m views

How to style icon color, size, and shadow of FontAwesome Icons

How could I style the color, size and shadow of icons from FontAwesome's Icons? For example, FontAwesome's site will show some icons in white and some in red but won't show the CSS for how to style ...
Elias7's user avatar
  • 12.4k
332 votes
12 answers
642k views

Use Font Awesome Icons in CSS

I have some CSS that looks like this: #content h2 { background: url(../images/tContent.jpg) no-repeat 0 6px; } I would like to replace the image with an icon from Font Awesome. I do not see ...
L84's user avatar
  • 45.7k
1 vote
4 answers
2k views

Font Awesome 5 - why aren't icons like bitcoin, facebook, twitter showing?

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">...
Martin's user avatar
  • 1,510
130 votes
18 answers
316k views

Use Font Awesome Icon in Placeholder

Is it possible to use Font Awesome Icon in a Placeholder? I read that HTML isn't allowed in a placeholder. Is there a workaround? placeholder="<i class='icon-search'></i>"
L84's user avatar
  • 45.7k
276 votes
44 answers
828k views

Font Awesome not working, icons showing as squares

So I'm trying to prototype a marketing page and I'm using Bootstrap and the new Font Awesome file. The problem is that when I try to use an icon, all that gets rendered on the page is a big square. ...
Connor Black's user avatar
  • 6,981
155 votes
15 answers
121k views

How to use icons and symbols from "Font Awesome" on Native Android Application

I'm trying to use Font Awesome on my application, I was able to integrate the font using Typeface.createFromAsset(), but I also want to use the icons provided by this font, but so far I haven't been ...
Julian Suarez's user avatar
327 votes
9 answers
710k views

Use Font Awesome icon as CSS content

I want to use a Font Awesome icon as CSS content, i.e., a:before { content: "<i class='fa...'>...</i>"; } I know I cannot use HTML code in content, so is it only images left?
sdvnksv's user avatar
  • 9,430
312 votes
29 answers
323k views

How to add font-awesome to Angular 2 + CLI project

I'm using Angular 2+ and Angular CLI. How do I add font-awesome to my project?
Nik's user avatar
  • 7,116
164 votes
25 answers
487k views

Font Awesome icon inside text input element

I am trying to insert a user icon inside username input field. I've tried one of the solution from the similar question knowing that background-image property won't work since Font Awesome is a ...
Seong Lee's user avatar
  • 10.4k
61 votes
8 answers
247k views

Search input with an icon Bootstrap

No clue how I can do this, since BS 4 doesn't support glyphicons. Do I set it up as a background or do I apply different positioning to a font-awesome icon? This is my code so far: <link rel=...
Retros's user avatar
  • 3,531
157 votes
7 answers
248k views

Add custom icons to font awesome

I love the Font Awesome icon font and want to use it for most of the icons on my site but there are a few custom svg icons that I'd need in addition to what's offered. I noticed that the .svg version ...
Christian Schlensker's user avatar
77 votes
3 answers
68k views

How do I include a font awesome icon in my svg?

I have an svg that includes images: <g><image id="myImage" class="myClass" x="12" y="15" width="10" height="10" xlink:href="/images/pic.png"/></g> How do I replace that line w/ a ...
user_78361084's user avatar
20 votes
5 answers
30k views

How to use Font Awesome from webjars.org with JSF

I am trying to use Font Awesome icons with my JSF application. I have had some success by following the getting started instructions and adding the following to my view's <h:head> section: <...
Ryan Bennetts's user avatar
192 votes
25 answers
894k views

Font Awesome icons are not working, I have included all required files [closed]

I am trying to use Font Awesome icons of version 4.1.0 on my website but they are not working, I have referenced them in the head of my page. I have tried using two methods. <a class="btn-cta-...
Luis Valdez's user avatar
  • 2,349
59 votes
10 answers
72k views

Rails: Using Font Awesome

My web designer has provided me with updated fonts/icons that have been added to font awesome - he placed this in a local fonts folder. I was also given a font-awesome.css file. I copied the fonts ...
user464180's user avatar
  • 1,349
229 votes
8 answers
310k views

Font-awesome, input type 'submit'

There seems to be no class for input type 'submit' in font-awesome. Is it possible to use some class from font-awesome for button input? I've added icons to all buttons (which actually links with ...
denis.peplin's user avatar
  • 9,653
57 votes
9 answers
49k views

Adding FontAwesome icons to a D3 graph

I am trying to set an icon with FontAwesome instead of text in my D3 nodes. This is the original implmentation, with text: g.append('svg:text') .attr('x', 0) .attr('y', 4) .attr('class', '...
blueFast's user avatar
  • 41.9k
19 votes
3 answers
27k views

Font Awesome 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 ...
mafortis's user avatar
  • 6,870
12 votes
5 answers
21k views

How to use 3rd party CSS libraries such as Font Awesome with JSF? Browser can't find font files referenced in the CSS file

I'm trying to integrate Font Awesome in JSF. <h:outputStylesheet library="font-awesome" name="css/font-awesome.min.css" /> But the browser can't find the font files. They appear as empty ...
AHmedRef's user avatar
  • 2,562
3 votes
3 answers
6k views

I can't get my font-awesome icons to show up. Tried importing css with multiple methods

I'm building a website portfolio using a HTML template. I don't have too much experience with css, but after importing the font-awesome css file both as a link and file in my django project, the icons ...
Kenny Workman's user avatar
338 votes
23 answers
768k views

Can I change the color of Font Awesome's cog icon?

I have to wrap my icon within an <a> tag for some reason. Is there any possible way to change the color of a font-awesome icon to black? or is it impossible as long as it wrapped within an <a&...
HUSTEN's user avatar
  • 5,137
122 votes
34 answers
288k views

Font awesome is not showing icon

I am using Font Awesome and do not wish to add CSS with HTTP. I downloaded Font Awesome and included it in my code, yet Font Awesome is showing a bordered square box instead of an icon. Here is my ...
Ganesh H's user avatar
  • 1,699
114 votes
8 answers
107k views

Extracting SVG from Font Awesome

I want to get the SVG path data from Font Awesome glyphs so that I can use them straight up as SVG in my HTML. I thought it would be as easy as copy-pasting the path data from fontawesome-webfont.svg, ...
Yarin's user avatar
  • 176k
111 votes
10 answers
239k views

How to vertically align text with icon font?

I have a very basic HTML which mix plain text and icon fonts. The problem is that icons are not exactly rendered at the same height than the text: <div class="ui menu"> <a href="t" ...
Fractaliste's user avatar
  • 5,797
95 votes
8 answers
263k views

How do I add a Font Awesome icon to input field?

How do I use the search icon included in Font Awesome for input? I have a search feature on my site (based on PHPmotion), that I want to use for the search. Here's the code: <div id="search-bar"&...
user2275855's user avatar
  • 1,137
46 votes
7 answers
111k views

Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue

just noticed on several websites that the font awesome icons aren's showing in Google Chrome. The console shows the following error: Font from origin 'http://cdn.keywest.life' has been blocked ...
Yatko's user avatar
  • 8,735
24 votes
3 answers
54k views

How to change color of icons in Font Awesome 5?

I can't colorize the Font Awesome 5 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="col-...
Ed Joe's user avatar
  • 317
164 votes
15 answers
417k views

Make Font Awesome icons in a circle?

I am using font awesome on some project but I have some things that I want to do with font awesome icons, I can easily call an icon like this: <i class="fa fa-lock"></i> Is it ...
Schneider's user avatar
  • 2,446
146 votes
8 answers
252k views

Using Font Awesome icon for bullet points, with a single list item element

We'd like to be able to use a Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) icon as a bullet point for unordered lists in a CMS. The text editor on the CMS only outputs raw HTML so ...
BaronGrivet's user avatar
  • 4,374
52 votes
9 answers
61k views

Using Icon Fonts as Markers in Google Maps V3

I was wondering whether it is possible to use icon font icons (e.g. Font Awesome) as markers in Google Maps V3 to replace the default marker. To show/insert them in a HTML or PHP document the code for ...
gfaw's user avatar
  • 715
10 votes
7 answers
28k views

CSS for star ratings via FontAwesome

I've tried a few variations of CSS star ratings via different methods, and am trying to implement the following via FontAwesome rather than using a sprite. I want to be able to include half stars ...
tomphilps's user avatar
  • 159
7 votes
2 answers
7k views

How to use Font Awesome icons in project as an icon of ImageButton

I am having a problem to realize how to use Font Awesome icons in my Xamarin application, I want to use it with ImageButtonas icon. And most tutorials I found didn't help me understand how it works.
GotStuckatm's user avatar
3 votes
2 answers
9k views

How to change the inner white color of Font Awesome's exclamation triangle icon?

How to change the inner (white) color of the icon <i class="fa fa-exclamation-triangle"></i>? P.S. Applying <i class="fa fa-exclamation-triangle" style="color:...
Haradzieniec's user avatar
  • 9,136
31 votes
8 answers
10k views

How can I add Font Awesome to my Aurelia project using npm?

I have been following the Contact Manager tutorial and would like to add Font Awesome to the project. Here's what I have done so far: npm install Font-Awesome --save Added the following to aurelia....
MaYaN's user avatar
  • 6,772
23 votes
1 answer
35k views

LESS mixin a variable class name

I am using Font Awesome 4.0.0, and want to do something like this in LESS: .btn-github { .btn; .btn-primary; margin-left: 3em; i { .@{fa-css-prefix}; .@{fa-css-prefix}-github; .@{...
Peter Sankauskas's user avatar
22 votes
2 answers
19k views

Font Awesome with Swing

Is it possible to use Font Awesome with swing applications? If possible then how to use its icons with swing components (JButton or JLabel). I've used Font Awesome earlier with my Primefaces ...
Akshay Raut's user avatar
17 votes
2 answers
18k views

Laravel 5.7 + Font Awesome

I'm trying to include the Font Awesome toolkit in Laravel 5.7. These are the steps I took: 1) Run npm install --save-dev @fortawesome/fontawesome-free 2) Check the folders in node_modules/ and ...
Nico's user avatar
  • 173
90 votes
4 answers
205k views

Vertical alignment of text and icon in button

I'm having trouble vertically aligning a font-awesome icon with text within a button under the Bootstrap framework. I've tried so many things including setting the line-height, but nothing is working. ...
Shane's user avatar
  • 2,415
56 votes
4 answers
79k views

Font Awesome 5 with Angular

How do I use font-awesome 5 with Angular (2+)? I've tried adding this inside a component: import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid'; import fontawesome from '@...
JeB's user avatar
  • 11.7k
43 votes
6 answers
50k views

Is it possible to change between two fontawesome icons on hover?

I have an anchor tag with a font-awesome icon as follows <a href="#" class="lock"><i class="icon-unlock"></i></a> Is it possible to change to icon on hover to a different ...
BaconJuice's user avatar
  • 3,739
22 votes
16 answers
62k views

font awesome icon is not appearing in IE 11, but showing in other browsers

I am new to font-awesome icons. I have one page in which there is a filter where user can search the data. I have added font awesome icon just before the search link (as per below screenshot), I can ...
Rohit Gaikwad's user avatar
9 votes
4 answers
12k views

jqGrid Pager Area - Using Font Awesome Icons

I would like to use Font Awesome icons: <i class="icon-edit"></i> in the jqGrid pager area instead of the physical images by default. .navButtonAdd('#vw_ComplaintSearchGridPager', { ...
Paul Brown's user avatar
  • 4,946
4 votes
2 answers
12k views

jqGrid:Font Awesome Icons

I am trying to use Font Awesome icons in place of the jqueryUI icons for the toolbar in my jqGrid (add,edit,delete,view icons). This demo is exactly what I would like to accomplish. I've read Oleg's ...
klm10's user avatar
  • 277

1
2 3 4 5
12