How to use fontawesome icons?

How to use fontawesome icons?

[vc_row css_animation=”” row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” angled_section=”no” text_align=”left” background_image_as_pattern=”without_pattern”][vc_column][vc_column_text]FontAwesome is a font that produces icon. Using FontAwesome is quite easy. First we need to call the FontAwesome style file. You can download the file from here. Then we need to use <i class='fa'></i> tag to show FontAwesome icon. Then you’ve to mention icon name after class ‘fa’.  In the following example, I’m showing book icon

<i class='fa fa-book'></i>

Above code will produce following result[/vc_column_text][vc_raw_html]JTNDaSUyMGNsYXNzJTNEJTI3ZmElMjBmYS1ib29rJTI3JTNFJTNDJTJGaSUzRQ==[/vc_raw_html][vc_column_text]We can use custom class to control the icon like

<i class='fa fa-book icon-control'></i>

<style type='text/css'> .icon-control{ font-size: 36px; color: green; } </style>

and it produces following output[/vc_column_text][vc_raw_html]JTNDaSUyMGNsYXNzJTNEJTI3ZmElMjBmYS1ib29rJTIwaWNvbi1jb250cm9sJTI3JTNFJTNDJTJGaSUzRSUwQSUzQ3N0eWxlJTIwdHlwZSUzRCUyN3RleHQlMkZjc3MlMjclM0UlMjAuaWNvbi1jb250cm9sJTdCJTIwZm9udC1zaXplJTNBJTIwMzZweCUzQiUyMGNvbG9yJTNBJTIwZ3JlZW4lM0IlMjAlN0QlMjAlM0MlMkZzdHlsZSUzRSUwQQ==[/vc_raw_html][vc_column_text]You can get all FontAwesome icons with their names, unicode and hexcode here.[/vc_column_text][/vc_column][/vc_row]

Leave a Reply

Close Menu
[TheChamp-Login]