How to Get Art Box to Appear After Page Loads
In spider web evolution, it is common to use font icons in SVG format instead of typing symbols using escape entities. For example, Font Awesome icons are most popular due to the scalability of the icons without loosing quality. However, if yous practice not implement properly font awesome icons will bear witness as box. If you lot accept bug with font icons, bank check out how to fix.
Using Font Awesome Icons in Website
In that location are two ways to use font icons on your website. I is to use in HTML tag and other is to use CSS pseudo classes. In both methods yous should link the source font crawly CSS and host the font files on your server then that proper styles can exist practical to the icons. Below is an instance of using font awesome in HTML:
Cheque this commodity from official site on how to use font icons on your website. When something is missing on loading, you will see the box like below instead of the icon.
Why Font Awesome Icons Showing as Box?
In order to insert a font icon on your site, y'all have to have the followings:
- Host fonts on your server
- Link correct font awesome CSS version
- No disharmonize with old and new versions on the same site
- Check correct font family unit
- Apply proper CSS class
- Check font weight
- Bank check CSS content lawmaking
Let usa check out ease point in detail.
1. Host Fonts on Your Server
In order to utilize font crawly on your website, it is necessary to host the font files also in the same directory. All spider web font typefaces should exist available in "/webfonts" binder and referenced in the CSS located in "/css" binder.
In well-nigh cases, the theme or plugin you use volition install all necessary CSS and font files on your server. This is the example, especially when y'all use WordPress for your website.
2. Link Right CSS Version
Font awesome was available for free till version four.seventy. However, there are both free and pro versions available starting from version 5.0. Though version 4.70 was outdated, most free plugins and themes still uses 4.70 due to the uniform CSS class and ease of utilize. Notwithstanding, version 5.0 has brands and solid styles for free users and you lot can use all.css to include both styles.
You can either register with font awesome site to get a CDN kit or use the CDN files available from Cloudflare.
3. Conflicting CSS Versions
One of the problem we have faced with a WordPress site is that a plugin was using version iv.seventy and the theme was using v.0. This was causing the conflict due to incompatible CSS class and content codes. Therefore, make sure to use the latest version 5.0 with proper CSS source file on your site.
4. Utilize Correct Font Family
In social club to use font awesome with CSS, you lot should use proper font family. Below is the kind of CSS lawmaking used in version four.seventy.
.li:before {
content:"\00A3″; font-family unit: "FontAwesome"; font-weight: normal; }
Still, this will show a box instead of an icon with version 5.0. you should employ the following CSS with versions 5.0 free version.
.li:before {
content:"\00A3″; font-family: "Font Awesome five Gratis"; font-weight: 900; }
Therefore, make sure to employ correct "Font Awesome 5 Free" font family unit in the CSS. In addition, if you are using social icons then the font family should be "Font Awesome five Brands". These are the ii font families bachelor for complimentary users.
5. Utilize Proper CSS Fashion Prefix
Some other confusion is that version 5.0 has dissimilar CSS classes than the previous versions. On version 4.vii you tin use the fa fashion prefix like below:
<i class="fa fa-camera"></i>
Still, this will non work with version v.0 onwards. The fa style prefix was deprecated and you should use fas for solid icons and fab for social branding icons like Facebook.
6. Cheque Font Weight
Font awesome version 5.0 does not back up general "font-weight:normal" declaration in CSS. You should declare specific font weight for the icon to show up.
seven. Bank check CSS Content Code
The final indicate is to brand sure the content code used in CSS is correct. You take to utilise 1 of the bachelor code in from the font awesome site in CSS pseudo element. In addition, ensure to employ the lawmaking in the format "\f00d"; to show the icon correctly.
Summary
Beneath is the summary of font family, font weight, style prefix and styles bachelor for free and pro users. You take to ensure all these are correct for the icon to testify up instead of a box.
| Style | Availability | Font Weight | Style Prefix | Font Family unit |
| Solid | Free | 900 | fas | Font Crawly 5 Gratuitous or Font Awesome five Pro |
| Regular | Pro | 400 | far | Font Awesome 5 Pro |
| Light | Pro | 300 | fal | Font Crawly five Pro |
| Duotone | Pro | 900 | fad | Font Awesome v Duotone |
| Brands | Free | 400 | fab | Font Crawly 5 Brands |
Source: https://www.webnots.com/how-to-fix-font-awesome-icons-showing-as-box/
Post a Comment for "How to Get Art Box to Appear After Page Loads"