Now let’s go a step further and add a target attribute to ensure these links open in a new tab or window (target=”_blank”). So let’s add in a href attribute (href=” “) and add in a URL. Okay, that’s great, but they’re still not links as they don’t contain the href attribute. So let’s start by swapping those tags for tags. This is fine if we just want a static icon, but we want to make this icon a link. 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. I did this by searching for each of the social media platforms on Font Awesome and then copying and pasting the code into my file. I’m going to add an icon for each of my social media accounts, including Facebook, Pinterest, Instagram and Google+. I’m now going to add some more of these icons to my site. Right now, the most important thing is that this icon is showing on your website, and the Font Awesome library is working as expected. Sure, it’s tiny! But don’t worry because I’ll show you how to make it larger later on in this post. This will, of course, vary for each icon in the Font Awesome library.Ĭopy this code and that paste it into your HTML code, and you should then see the icon on your website. It is these class that tells the browser which icon we want it to show. Notice that it is an opening and closing tag with two classes assigned to it. It’s entirely up to you which icon you choose, but I’m going to pick the first one.Ĭlick on the icon you wish to use, and you will see a page that looks like this:ĭon’t be surprised if the colour of this page is different to mine!Īt the top of the page, you will see a spinet of HTML. 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. So, for instance, I’m going to search for Twitter to find the Twitter icon. You can instead use the search at the top of this page to search for a specific icon. You don’t need to scroll through all the icons on this page to find the one you want to use. Any icons that are a grey colour are actually a part of the premium package, so you would need to upgrade to use these. Here you will see a list of icons available to use. Go to the Icons page on the Font Awesome website. Now that Font Awesome is installed on your website, you can start making your icon links. Your code might look a little something like this… How to display Font Awesome icons If you are using WordPress, you should enqueue this stylesheet correctly via the functions.php folder. Save and upload your file, and that’s it! The Font Awesome library is now installed on your website. You will need to copy this code and paste it in-between the tags in your HTML file. Here you will see a piece of code (as highlighted above). It should look a little something like this: This post was last updated on 25th October 2018.įirstly, we need to install Font Awesome, so head over to the How to Use page on their website. 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. And best of all, using icon fonts allows you to completely customise their appearance using CSS. We can use these icons to easily create social media icons on our website, meaning you don’t need to create the icon images yourself or source them from elsewhere. 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. There are a variety of icon font libraries out there, but my favourite one is called Font Awesome. Icon fonts are fonts, but instead of containing letters and numbers, they contain symbols. You might think that you have to create images for each social media accounts using a tool like Photoshop.īut did you know that it’s possible to create social media icons using icon fonts? Have you ever wondered how to create your own social media icons that link out to your social media accounts?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |