Using Font Awesome 4 in Your Website with CDN


Hi Folks!

Ever seen a website with awesome icons such as : ?

Have you ever wondering how to make such thing? If so then great, you're in the right place. Let's get into it.
First of all, create or open up your HTML file. Let's say it's called index.html and it might look similiar to this :
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>My Awesome Website</title>
</head>

<body>

</body>

</html>
Ok so before we proceed to the next step, we need to include FA's library.
To do so, just copy the code below and place it right before your </head> tag :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
</head>
So your new index.html file would looks like this :
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>My Awesome Website</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
</head>

<body>

</body>

</html>
Next, let's use the FA icons! You can achieve this by adding an <i> with an icon class you can get from Here

Using class

Let's say you wanted to use arrow icon : <i style="font-size:24px" class="fa fa-arrows"></i> Code above will gives you this :

Using unicode

After checking the link I've given above, you might wondering what are those &#fxxx; right?
Simply, you also type those codes and it will automatically converted into certain icons.
<i style="font-size:24px" class="fa">&#xf047;</i> will gives you this :

That's all! Have a great times developing your websites.

standinshd

Just another ordinary human but with a crazy level of interests in IT

No comments:

Post a Comment