Here we are solving a basic problem faced by a beginner web developer in bootstrap i.e. how to create your own customized icons in bootstrap .

Objectives and Outcomes

In this, we will discuss about creating your own customized icons in bootstrap

Sometimes there is a need to create your own custom icon, font-awesome provide a facility to create your own icon, just open the downloaded file font-awesome.css and add the code for your icon. A sample of code is given below, this will create an icon that looks like Js

.fa-letter-js:before {
    content: "Js";
}

Check out the following code to insert the above created custom font-awesome icon in bootstrap

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-letter-js" style="font-size:48px;color:#585858;"></i>
</body>
</html>


Output