Font Awesome

Tags:

Overview

Font Awesome is a set of icons made in a text-based format. In a web browser, you can apply icons by using the CSS file provided by Font Awesome. It is not an image; you can think of it as a font that contains icons. If you download the font file, you can also install it on your computer and apply it to various documents.

Because Font Awesome is not an image, it is fast and compatible with all web browsers. Since font icons are vector based, they also do not break when enlarged.

Getting Started

There are two main ways to use Font Awesome.

  • Use a CDN
  • Download and use it
  • Using a CDN is much easier.

If you download and use it, you do not need to worry about CDN server failures, but it has the disadvantage of consuming your own traffic.

Using a CDN

To use a CDN, add only the following code between <head> and </head> in the HTML document.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

4.4.0 is the Font Awesome version, so you can use the latest version by changing only the number.

If you can modify only the CSS file, you can also add the following code at the top of the CSS file.

@import url( "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" );

Downloading and Using It

http://fontawesome.com/

After downloading and extracting Font Awesome, you will see several folders and files.

Among them, the files that must be uploaded to the server are font-awesome.min.css in the css folder and all files inside the fonts folder.

If you upload them while keeping the folder structure, you can use them as-is. If you need to upload them with a different folder structure, open font-awesome.min.css and modify the path to the font files in @font-face.

After uploading, add the following code between <head> and </head> in the HTML document.

<link rel="stylesheet" href="{path}/font-awesome.min.css">

Adding an Icon

If you add a tag element in the following format to HTML, an icon is displayed.

<i class="fa fa-xxx"></i>

For example, if you add the following tag element, a magnifying glass icon is displayed.

<i class="fa fa-search"></i>

You can find many other icon codes in the icon list on the Font Awesome website.

When you click the icon you want, you can also check the enlarged icon and its code.

Rules for class Values

The icon class value uses the icon name as-is. For example, if the icon name is ban, it becomes:

<i class="fa fa-ban"></i>

If the icon name is home, it becomes:

<i class="fa fa-home"></i>

Example) Although it looks like an icon, it is essentially a font, so you can use CSS to set its size, color, and other properties.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Coding Factory</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <style>
      .a {
        margin: 70px 0px;
        text-align: center;
        font-size: 140px;
        color: #2196F3;
      }
    </style>
  </head>
  <body>
    <p class="a"><i class="fa fa-bullhorn"></i></p>
  </body>
</html>

Using an Icon as a Marker for a List (ul, ol)

You can use Font Awesome icons as markers for lists (ul, li).

The code is a little more complex than using an image, but it has the advantage that you can use many different icons and freely change their color and size.

Choosing an Icon

Choose the icon to use as the marker. Then find the code for the selected icon in font-awesome.css.

For example, the code for angle-right is as follows.

.fa-angle-right:before {
  content: "\f105";
}

Removing the Default Marker

Remove the marker.

ul {
  list-style-type: none;
}

Adding the Icon

Make the icon appear before the li element.

li:before {
  content: "\f105";
  font-family: FontAwesome;
}

Adjust the margins appropriately.

li:before {
  content: "\f105";
  font-family: FontAwesome;
  margin-left: -1.0em;
  margin-right: 0.5em;
}

Full Code

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Coding Factory</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <style>
      body {
        font-family: sans-serif;
      }
      ul {
        list-style-type: none;
      }
      li:before {
        content: "\f105";
        font-family: FontAwesome;
        margin-left: -1.0em;
        margin-right: 0.5em;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo.</li>
      <li>Aliquam vitae aliquet ipsum.</li>
    </ul>
  </body>
</html>