Add font awesome icons to our buttons

New Page January 5, 2020 / #Sources

How to Add Font Awesome Icons to Your Buttons

How to Add Font Awesome Icons to Your Buttons

Font Awesome is a handy icon library. These icons can be vector graphics stored in .svg file format or web fonts.

These icons are treated as fonts. You can specify their size in pixels and they will assume the font size of their parent HTML elements.

basic use

To include Font Awesome in your app or page, simply add the following code to the <head> element at the top of your HTML code:

<link rel=”stylesheet” href=”” crossorigin=”anonymous”>

The ielement element was originally used to italicize other elements, but is now commonly used for icons. You can add Font Awesome classes to the element to make it an icon, for example:

<i class=”fas fa-info-circle”></i>

Note that the span element is also acceptable for use with icons.

Here’s how to add an icon:

<i class=”fas fa-thumbs up”></i>

This will produce a simple thumbs-up icon:

thumbs up

And here is how to insert this icon on a button:

<button> <i class=”fas fa-thumbs-up”></i> Like </button> I like

Note that there are two parts to using an icon, the style prefix and the icon name. In the example above, the style prefix and icon name are fas and fa-thumbs-up respectively.

Font Awesome offers the following style prefixes:

style Style prefix Diet type
Solid FAS Free
Regular far Pro
Light fake Pro
duotone fashion Pro
brands fabulous Free

Branded icons are often submitted by the business itself and are useful for creating things like social authentication or checkout buttons. These icons include Twitter, Facebook, Spotify, Apple, and even freeCodeCamp:

<i class=”fab fa-free-code-camp”></i> fcc-fa-icon

While you only get access to solid and branded icons on the free plan, there are still plenty of ways to customize them.


Font Awesome Style Icons

For simple applications, you can use inline styles:

<span style=”font-size: 3em; color: tomato;”> <i class=”fas fa-thumbs-up”></i> </span> Well done in style

For size, you can also use Font Awesome’s built-in keywords:

<i class=”fas fa-thumbs up fa-xs”></i> <i class=”fas fa-thumbs up fa-sm”></i> <i class=”fas fa- thumb-up fa-lg”></i> <i class=”fas fa-thumb up fa-2x”></i> <i class=”fas fa-thumb up fa-3x “></i> <i class=”fas fa-thumbs up fa-5x”></i> <i class=”fas fa-thumbs up fa-7x”></i> <i class=”fas fa-inch- up to fa-10x”></i> keyword-size

One important thing to remember is that FA icons inherit the font size from the parent container. This means that the icons adapt to any text that can be used with them, keeping the layout consistent.

For example, suppose you want to create multiple buttons. The default button size is quite small, so write CSS to increase the size of the buttons, as well as the text and icons they contain:

<button> <i class=”fas fa-thumbs-up”></i> I like </button> <button> <i class=”fas fa-thumbs-down”></i> I don’t dislike </button> Button <button> <i class=”fas fa-share”></i> Share </button> { font-size: 1.5em; margin: 5px; } buttons-ex

You can also adjust an icon’s size directly by hovering over the icon itself and adjusting its font size.

Font Awesome is, well, awesome! Like most popular icon toolkits, it’s easy to include and use in all your projects. Now go to the all things icon.


More information

  • Font Awesome Docs
  • All Font Awesome icons available

If this article was helpful to you, please tweet it.

Learn to code for free. freeCodeCamp’s open source program has helped over 40,000 people get jobs as developers. Begin


Video Add font awesome icons to our buttons

Related Posts

Free chat room code for my website

Contents1 How to set up a free chat room on the website.2 3 comentarios2.1 Trackbacks/Pingbacks2.2 Submit a Comment Cancel reply3 How to Create a Chat Room Website…

Background image full screen css

Contents1 Cómo – Full Page Image1.1 Example1.2 Example2 CSS background image tamaño tutorial: how to codify a complete page background image3 Perfect Full Page Background Image3.1 Méthode CSS géniale,…

WordPress leverage browser caching

Contents1 Aproveche el almacenamiento in hidden del navegador1.1 Will it works for my website?1.2 Where are plugin options1.3 Some JavaScript files still display under Leverage Browser Caching1.4…

WordPress post to facebook page

Contents1 How to Automatically Post to Facebook from WordPress1.1 Download Now: How to Launch a WordPress Website [Free Guide + Checklist]1.2 1. Create an IFTTT account.1.3 2….

Download images from wordpress media library

Contents1 How to export your WordPress media library1.1 Download maintenant : How to launch a WordPress website [Free Guide + Checklist]1.2 How to export your WordPress media…

WordPress single post template

Contents1 How to Create Custom Unique Post Templates in WordPress2 Post Template Files2.1 author.php2.2 Fecha.php3 Handbook navigation4 How to Create Custom Single Post Templates in WordPress5 Video…