In staff picks Free icon set Free for commercial use. You will see that this search narrows it down to two Twitter icons, and both aren’t greyed out so they’re both available to use. Okay, that’s great, but they’re still not links as they don’t contain the href attribute. Submit a font Tools . Ad by Woodcutter. Huge set of social media icons including 90 different icons for 45 social networks. You can instead use the search at the top of this page to search for a specific icon. Make sure you click the link in this email or else you won’t receive my monthly newsletter! HOW TO. You don’t need to scroll through all the icons on this page to find the one you want to use. Finally, I’m going to set the border-radius to be 50% to make the icon a circle. The live example is in the footer section, See how those social media icons look beautiful with that pulse effect. SUBSCRIBE TO:: Oston Code Cypher, » How to center anything on a wepage using CSS, » Learn how to use CSS box shadow property - Source Code, » Learn how to create Gradient Backgrounds using CSS, » How to create Text Animation using HTML and CSS, How To Create A Stacked Gallery Using HTML And CSS Source Code, How to create a simple CMS for HTML and PHP Websites, How to center anything on a wepage using CSS, How to create Parallax Scrolling Effects using Materialize CSS, How to create a Cutout Text Effect using CSS, How to Animate Font Awesome Icons With Javascript, How to create a simple Autocomplete Search Engine Using Materialize CSS. Obviously, these links aren’t very attractive, so let’s use some CSS to style them. Socialico is a package of 74 social media icons, combined within a single weight font. So in this simple post, I will provide with source code and video to teach you how to create simple attractive animated social media icons. For the icons, I’ll use Font Awesome, which is the go-to toolkit for almost everyone, especially web developers.. Here’s what you need to do. The live example is in the footer section, See how those social media icons look beautiful with that pulse effect. The world’s most popular and easiest to use icon set just got an upgrade. It’s entirely up to you which icon you choose, but I’m going to pick the first one. And best of all, using icon fonts allows you to completely customise their appearance using CSS. They can really trigger users to click on them. Social Icons. Forum FAQ. But don’t worry because I’ll show you how to make it larger later on in this post. Arsek. Maybe you’d like round icons instead. Step 1. So let’s add in a href attribute (href=” “) and add in a URL. Again we can change what the icon looks like when you hover over it. Now I’ll set the width of the icon (width: 50px;) and set the icons to align to the centre (text-align: center;). So, let’s begin with Twitter. Check out these icons here > 30. Flaticon, the largest database of free vector icons. Copy this code and that paste it into your HTML code, and you should then see the icon on your website. So say, for example, you can to use different colours for each link: Let’s use the same styling we used before, but add in some extra bits of styling to make each link a square. Social Media Circled by Woodcutter . It is these class that tells the browser which icon we want it to show. Great! Join Oston code cypher today and get your life time tutorials for free!. Firstly, we need to install Font Awesome, so head over to the How to Use page on their website. Now I’m going to going to update the styling so that the icons change colour on hover. Sure, it’s tiny! So, I’m happy with the size of the icons, space between them, the colour and the removal of the underline. You may have noticed when you copied the code for the icon from the Font Awesome website that there was a class wrapped in 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 | 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="", 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.