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"></i>
will gives you this :
No comments:
Post a Comment