Font Awesome is one of the most popular ways to add icons to your site. But what if you add the CDN to the <head> element of your page and all you see are black rectangles? Here are a couple of things to keep in mind when you add Font Awesome to your next project.

Using Web Fonts with CSS 

The /css/all.css file contains the core styling plus all of the icon styles that you’ll need when using Font Awesome. The /webfontsfolder contains all of the typeface files that the above CSS references and depends on. Your don't need any other folder or any single file without this two manson above. Copy the entire /webfonts folder and the /css/all.css into your project’s static assets directory (or where ever you prefer to keep front end assets or vendor stuff).  Add a reference to the copied /css/all.css file into the <head> of each template or page that you want to use Font Awesome on. Just like,

assets/webfonts 

assets/css/all.css

Imagine you have the following HTML:

<!DOCTYPE html>
<html>
  <head>
    <link href="/assets/css/all.css" rel="stylesheet"> <!--load all styles --> </head>
  </head>
<body>
	
</body>
</html>

RELETED TAGS

Website Development Font Awesome HTML/CSS

SHARE THIS NEWS