We can use an icon collection (call Font Awesome Icon) as per our required. It is completely free. But if you want more icons as well as some custom icon then you can use the pro version of the collection. To use the awesome icon we have to follow the following steps

1. Open http://fontawesome.io/.
2. Download the free version.
3. Uncompressed at your working folder.
4. Create an html file link the font-awesome.min.css file.
5. Now get the name of the icons from Font Awesome Website

Basic Code to access the icons

<i class="fa fa-youtube-play"></i> youtube play icon

Control the size of the Icon

<i class="fa fa-youtube-play fa-lg"></i> fa-lg
<i class="fa fa-youtube-play fa-2x"></i> fa-2x
<i class="fa fa-youtube-play fa-3x"></i> fa-3x
<i class="fa fa-youtube-play fa-4x"></i> fa-4x
<i class="fa fa-youtube-play fa-5x"></i> fa-5x

List Icons

<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List Item</li>
<li><i class="fa-li fa fa-check-square"></i> List Item </li>
<li><i class="fa-li fa fa-spinner fa-spin"></i> List Item </li>
<li><i class="fa-li fa fa-square"></i> List Item </li>
</ul>

Bordered & Pulled Icons

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of

.
.
.
<i class="fa fa-quote-right fa-3x fa-pull-right fa-border" aria-hidden="true"></i>

Animated Icons

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

Rotated & Flipped

<i class="fa fa-cut"></i> normal<br>
<i class="fa fa-cut fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-cut fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-cut fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-cut fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-cut fa-flip-vertical"></i> fa-flip-vertical

Stacked Icons

<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>

<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>

<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x"></i>
</span>

We can also apply font-awesome icons in more widely in bootstrap framework.