Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font-awesome showing square instead icon

I need to change the font-family to some DropDownList I have, icons are visible until I change the font-family. Every font-family I choose doesn't work for the icon, and so I always see a square instead, how can I fix it?

Thanks

like image 206
aingeal_brea Avatar asked Sep 04 '17 15:09

aingeal_brea


People also ask

Why is my Font Awesome icon showing as a square?

This is a Pro icon! To use the solid style of “square“, you'll need a subscription to a Pro-level plan or a perpetual Pro license that includes the specific version of Font Awesome in which this icon (or style) was released.

Why is my Font Awesome icon not displaying?

Make sure you're using the latest and greatest by updating your CDN code reference, updating your Font Awesome package via npm, or downloading a fresh copy of Font Awesome. You can check with version an icon was added to on its detail page (e.g. question-circle was added in Verion 1 but last updated in 5.0. 0).

How do I show Font Awesome icons?

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct). icon If you change the font-size of the icon's container, the icon gets bigger.

What is FAS and fab in Font Awesome?

fas: font awesome solid. It is also free to use. fab: font awesome brands. Free to use.


3 Answers

For <i> tags, put priority to use FontAwesome font-family

body * {
font-family:'tahoma'!important;
}

body i {
font-family:'FontAwesome'!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa fa-male"></span> <span>Male</span> 
<br>
<span class="fa fa-female"></span> <span>Female</span>
<hr>
<i class="fa fa-male"></i> <span>Male</span> 
<br>
<i class="fa fa-female"></i> <span>Female</span>
like image 108
Farhad Bagherlo Avatar answered Oct 10 '22 03:10

Farhad Bagherlo


  1. Include font awesome in your <head> tag, like this <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
  2. Use icon exactly like this: <i class="fa fa-address-book" aria-hidden="true"></i>, no more, no less, nothing in between, don't change <i> to <span> or change it's font-family. If you want to update colours, stylings, I recommend to add new class to it and update this way.
like image 32
Melcma Avatar answered Oct 10 '22 02:10

Melcma


It could also be which link you are using. Some icons are from newer releases and don't work on old links of the repository.

Make sure that the cdn you're using is the newest.

like image 31
EAzevedo Avatar answered Oct 10 '22 01:10

EAzevedo