How To Add Awesome Fonts Into Wesbsite For Icons To Make Beautiful Layout

How to add awesome fonts to wesbsite

Hello everyone, congdongblog will share with you a good application on the website, you will add beautiful and beautiful icons as you like.

Font Awesome is a library that contains these Signature font or use in website. The symbol font is understood as the common icons to add to the website, neither the design to save images nor the css to consume space ...

• 
  

  How to add awesome fonts

  
  

There will be many ways to add to the website and use them, congdongblog will guide you 2 ways for you to use.

1: How to add awesome font to wesbsite using theme's function.php,

You just add the code below to the function.php to be used offline

function enqueue_our_required_stylesheets(){
	wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

2: How to add awesome fonts to the website with the link in the header.php of the theme

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

• 
  

  Font Awesome uses in the website

  
  

After you add the awesome font library, you select the desired icons to add to the website as you like:

Here are the icons of the Font Awesome library you can freely choose:
https://fontawesome.com/v4.7.0/icons/

Note: Library icon tags only get when you add the code of the article but not visible to you anywhere.

For example: I added the information icon to make me more beautiful

 class="fa fa-address-card" aria-hidden="true"> Cộng đồng blog

Result : blog community

• 
  

  CSS icon Font Awesome before and after.

  
  

Many brothers want to add this awesome font icon to before and after in case the card cannot be inserted I can go in, I will guide you guys to make it easy for you.

Link more tutorial before after more intuitive

How to Add Font Awesome to Before and after

Css like me down below,

.class-cua-ban:before{
   content:"mã icon";
   font-family: FontAwesome;
}

Note:

1. Code icon you click on the icon you want on the page https://fontawesome.com/v4.7.0/icons/.


2. Your website must be sure to add a library Awesome font Okay, if not you can see at the top of this article.

Alright guys, see what a pity, right, bro: p

If you have any questions, please contact me or leave a comment below, join the groupcongdongblog to have more new news offline. I will support you all, thank you everyone!