How do I add Font Awesome icons to my website?

 
1
0
-1

I want to add social media icons to my website. I would like to use Font Awesome icons, how can I do this?

    CommentAdd your comment...

    1 answer

    1.  
      1
      0
      -1


      Here's how can add the free version of Font Awesome icons to your website. 

      This is for advanced users only and requires knowledge of CSS.


      These are the icons you can choose from.

      https://fontawesome.com/v5/cheatsheet/free/regular


      Go to Website > HTML Head

      click Edit

      In the first box, paste the following code

      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

      Click Save Website Header and Footer


      Next, go to Website > Custom Code Snippets

      Click Create a Custom Code Snippet

      Next to Name*, name the snippet Font Awesome Brand Icons

      Next to Code*, add the following

      <div class="color-social-media-icons">
<a href="https://smile.amazon.com/ch/"><i class="fab fa-amazon"></i></a>
<a href="https://www.facebook.com/"><i class="fab fa-facebook"></i></a>
<a href="https://twitter.com/"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a>
<a href="https://www.tiktok.com/@"><i class="fab fa-tiktok"></i></a>
  </div>

      Here you can see we have a container named color-social-media-icons and then we have added the following Font Awesome icons for Amazon Smile, Facebook, Twitter, Instagram, and TikTok. You can add or remove icons.

      For Amazon Smile, add your EIN number after ch/

      Once you've updated the URL's , click Save Code

      Now we will add the custom styles in your CSS.

      Go to Website Custom CSS

      Add the following to your custom style sheet.  

      /* ===============
FA BRAND COLORS HEADER
  =============== */

.color-social-media-icons {
	float: right;
	display: inline-block;
	margin-top: -5px;
	margin-bottom: -25px;
	margin-right: 25px;
	padding-right: 20px;
}

i.fas,
i.fab {
	font-size: 20px;
	padding: 10px;
	width: 20px;
	text-align: center;
	text-decoration: none;
	/*margin: 2px 5px  5px 2px;*/
	margin: 0px 3px 40px;
	border-radius: 50%;
}

i.fas:hover,
i.fab:hover {
	opacity: 0.7;
}

.fa-donate {
	background: #16a085;
	color: white;
}

.fa-paw {
	background: #138CED;
	color: white;
}

.fa-amazon {
	background: #ff9900;
	color: white;
}

.fa-facebook {
	background: #3B5998;
	color: white;
}

.fa-twitter {
	background: #55ACEE;
	color: white;
}

.fa-youtube {
	background: #bb0000;
	color: white;
}

.fa-instagram {
	background: #125688;
	color: white;
}

.fa-tiktok {
	background: #000;
	color: white;
}


      We've styled the icon's background color to use the brand colors for each.

      Note that we have added float right and margins to position the icons. This is what we've used on demo 9. You may need to adjust these to work with your own site for where you would like the icons to appear. This gives you a place to start.

      Now that you have added the styles, you can add the custom code snippet to a web page.

      Go to Website > Web Page List and click the edit icon next to the web page you would like to add the code snippet. Click the blue paw icon and place your code snippet on the web page and Save.

      Open the web page in your browser live to view the results.

      Using a tool like Chrome Developer Tools you can preview changes to your custom styles before adding your changes to your stylesheet.




        CommentAdd your comment...