tags. Right now, the most important thing is that this icon is showing on your website, and the Font Awesome library is working as expected. So I’m going to go to my stylesheet and add a new selector: I’m going to start my making my social media icons larger (font-size: 26px;), add some space between each of them (margin: 0 10px 0 0;), removed the underline (text-decoration: none;), and then change the colour of them (color: #000000;)…. You will need to copy this code and paste it in-between the tags in your HTML file. Yes, I would like to receive the monthly newsletter as well as other news and updates from Holly Pryce. Authors Top. Your code might look a little something like this…. So, for instance, I’m going to search for Twitter to find the Twitter icon. Check out these icons here > 29. 567 icons in 7 icon sets. Step 1. Font Awesome has a fantastic collection of icons (hundreds of which are free), including the logos of many social media platforms like Facebook, Twitter, Instagram, etc. […] free icons that you can use on your website. Social Media Circled Font | dafont.com English Français Español Deutsch Italiano Português . Save my name, email, and website in this browser for the next time I comment. Have you ever wondered how to create your own social media icons that link out to your social media accounts? SHARE. Font awesome comes with the fa-circle icon which is a solid circle, so we can use that for the background. Or do you prefer a different icon font library? Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Dependencies: font-awesome.css * = Required. Tabs Dropdowns Accordions Side Navigation Top Navigation Modal Boxes Progress Bars Parallax Login Form HTML Includes Google Maps Range Sliders Tooltips Slideshow Filter List Sort List. You can unsubscribe at any time by clicking the link in the footer of my emails, and I promise never to send you any spam. You’ll now receive an email from me to ask to you to confirm your subscription. The live example is in the footer section, See how those social media icons look beautiful with that pulse effect. For example href="https://facebook.com/YourUsername", Download project files from here: Download description, I will always put out free content on my YouTube Channel, but showing your support, subscribing to it, pushes me and gives me motivation, not because of the money, but because it feels like people really appreciate what I do. So let’s start by swapping those tags for tags. Notice that it is an opening and closing tag with two classes assigned to it. Add Font Awesome social media icons to GeneratePress menu. I’m now going to add some more of these icons to my site. You might think that you have to create images for each social media accounts using a tool like Photoshop. This is just so that I can target the links easily without targeting every link on my website. Again, let’s start with the original styling we used to for our links and make some amends. I’m going to start by wrapping my icons and links in a div and then I will give this div a class of “socialMediaLinks”. Moreso, increasing your follower count on those different platforms linked on your site. First of all, having social media icons on your website or portfolio will enable users to seek further help from you(Basing on their Questions) or get to know you in person. Now that Font Awesome is installed on your website, you can start making your icon links. REPORT ERROR. More icons. I’m going to add an icon for each of my social media accounts, including Facebook, Pinterest, Instagram and Google+. In this post, I’m going to show you how to set up and utilise icons from Font Awesome, turn them into links, and then style them. Add Font Awesome social media icons to GeneratePress menu. I recommend backing up the file or the whole website, and also have a child theme in place, otherwise, the changes will be lost with the next update.