> For the complete documentation index, see [llms.txt](https://angularactivity.gitbook.io/project/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://angularactivity.gitbook.io/project/angular-7-font-awesome-5.md).

# Angular 7 - Font Awesome 5

In this article, we'll see how to setup Font Awesome 5 in Angular 7.

![Angular 7 - Font Awesome 5](https://3664850746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LOwWulv1WImTywA9fkU%2F-LP1QGCC7MFvdl4ema6b%2F-LP1QUlJuBB-ogRIoeP8%2FCopy%20of%20A7-Fontawesome5.png?alt=media\&token=42987337-04a7-4391-b02e-9ad3cb26c6ec)

🎬Video version: <https://www.youtube.com/watch?v=wTOzRfWzdcQ>

## Step 0 <a href="#step-0" id="step-0"></a>

**Installing angular-cli**

> *Note*: you can skip this part if you already have application generated

```
sudo npm i -g @angular/cli@next
ng new angular7app
cd angular7app
```

## Step 1 <a href="#step-1" id="step-1"></a>

* Open `src/index.html` and insert this entry in the head section.

```
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
```

## Step 2 <a href="#step-2" id="step-2"></a>

* Pick an icon in the Font Awesome Icon section. Here we chose `angellist`.

![](https://3664850746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LOwWulv1WImTywA9fkU%2F-LP1Qg6-n9USnIhf6ufo%2F-LP1Souoeh_LD4jWmrF1%2FScreenshot%202018-10-17_10-38-44.png?alt=media\&token=98259acf-8c6c-4321-b7a7-3ce4131d6c39)

## Step 3 <a href="#step-4" id="step-4"></a>

* Open `src/app/app.component.html` and add:

```
 <i class="fab fa-angellist"></i>
```

## Step 4  <a href="#step-5" id="step-5"></a>

* Launch the application:

```
ng serve -o
```

![angellist icon right to the Welcome to angular7app! title.](https://3664850746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LOwWulv1WImTywA9fkU%2F-LP1YVAvLwkWYepca20T%2F-LP1YZbktQMV3e0FfKON%2FScreenshot%202018-10-17_10-53-04.png?alt=media\&token=7fed9a1f-608b-4109-be7a-8c8d49f7f022)