Questions tagged [font-awesome]
Font Awesome is an iconic standalone vector font, initially developed for use with the Twitter Bootstrap front-end framework.
559
questions
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 <...
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 ...
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;
}
....
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-...
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: "...
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 ...
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 ...
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 ...
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 ...
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">...
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>"
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.
...
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 ...
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?
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?
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 ...
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=...
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 ...
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 ...
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:
<...
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-...
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 ...
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 ...
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', '...
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 ...
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 ...
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 ...
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&...
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 ...
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, ...
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" ...
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"&...
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 ...
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-...
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 ...
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 ...
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 ...
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 ...
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.
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:...
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....
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;
.@{...
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 ...
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 ...
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.
...
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 '@...
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 ...
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 ...
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', { ...
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 ...