Menu
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 code:
<html> <head> <link rel="stylesheet" href="../css/font-awesome.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> </head> <body> <div style="font-size: 44px;"> <i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x </div> </body> </html> I would like to know how to make the icon display instead of the bordered square box.
721
If you installed the Free Font Awesome version but try adding Pro icons to your web pages, they won't show. The solution to this is either you use the alternative free icons or upgrade to a Pro subscription/license.
You place Font Awesome icons by using the prefix fa and the icon's name.
Add Icons to HTML We recommend using <i> element with the Font Awesome CSS classes for the style class for the style of icon you want to use and the icon name class with the fa- prefix for the icon you want to use.
To fix this problem, firstly you need to go to your admin dashboard. Go to the “Elementor” > “Settings” and open the “Advanced” tab. Here you need to find the “Load Font Awesome 4 Support” option and activate it.
In my case i made the following mistake in my css code.
*{ font-family: 'Open Sans', sans-serif !important; } This will override all font family rules for the entire page. My solution was to move the code to body like so.
body{ font-family: 'Open Sans', sans-serif; } NB: Whenever you use the !important flag in css, any other css rule declared of the same type on the same element will get overriden.
61
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
