How To Add Font Awesome Icons To Your Buttons - FreeCodeCamp

Trang chủ » Thư Viện Icon Facebook » How To Add Font Awesome Icons To Your Buttons - FreeCodeCamp

Có thể bạn quan tâm

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

These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.

Basic use

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

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">

The i element was originally used to make other elements italic, but is now commonly used for icons. You can add the Font Awesome classes to the i element to turn it into 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 you add an icon:

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

This will produce a simple thumbs up icon:

Image

And here's how you would insert that icon onto a button:

<button> <i class="fas fa-thumbs-up"></i> Like </button>

Image

Notice 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:

StyleStyle PrefixPlan Type
SolidfasFree
RegularfarPro
LightfalPro
DuotonefadPro
BrandsfabFree

Brand icons are often submitted by the company itself, and are useful for building things like buttons for social authentication or payment. These icons include Twitter, Facebook, Spotify, Apple, and even freeCodeCamp:

<i class="fab fa-free-code-camp"></i>

Image

While you'll only have access to solid and brand icons under the free plan, there are still many ways to style them.

Styling Font Awesome icons

For simple applications, you could use inline styles:

<span style="font-size: 3em; color: Tomato;"> <i class="fas fa-thumbs-up"></i> </span>

Image

For sizing, you could 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-thumbs-up fa-lg"></i> <i class="fas fa-thumbs-up fa-2x"></i> <i class="fas fa-thumbs-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-thumbs-up fa-10x"></i>

Image

An important thing to remember is that FA icons inherit the font-size of the parent container. This means that the icons scale with any text that might be used with them, which keeps the design consistent.

For example, say you want to create several buttons. The default size for the buttons is quite small, so you write some CSS to increase the size of the buttons, along with the text and icons within them:

<button> <i class="fas fa-thumbs-up"></i> Like </button> <button> <i class="fas fa-thumbs-down"></i> Dislike </button> <button> <i class="fas fa-share"></i> Share </button> button { font-size: 1.5em; margin: 5px; }

Image

You can also adjust an icon's size directly by targeting the icon itself and adjusting its font-size.

Font Awesome is, well, awesome! As the most popular icon toolkits, it's easy to include and use in all of your projects. Now go on icon up all the things.

More Information

  • Font Awesome docs
  • All available Font Awesome icons

Từ khóa » Thư Viện Icon Facebook