# Using font awesome

**URL:** <https://talk.jekyllrb.com/t/using-font-awesome/5267>\
**Category:** Help\
**Created:** [November 24, 2020, 9:50pm UTC](https://talk.jekyllrb.com/t/using-font-awesome/5267 "2020-11-24T21:50:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![gianpaolof](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/gianpaolof/32/2939_2.png) [@gianpaolof](https://talk.jekyllrb.com/u/gianpaolof)\
**Post date:** [November 24, 2020, 9:50pm UTC](https://talk.jekyllrb.com/t/using-font-awesome/5267/1 "2020-11-24T21:50:15Z")

</div>

Hello!  
I’m trying to use font awesome in a gh page based on photorama theme but it does not work. I am already using font awe in my main page which is based on uno theme and it works ok (I just needed to modify the config.yaml).  
I just would like to change the fonts used in the galleries:

> **[album - PHOTORAMA](https://gianpaolof.github.io/photorama/gallery/gallery01/)**

  
but I don’t know which files I need to modify. Any hint?  
(I’m not sure if I want to use font awe for the whole theme, like uno theme does, that’s what I tried to do at first without luck 😃 )

REgards  
Gianpaolo

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 25, 2020, 8:29am UTC](https://talk.jekyllrb.com/t/using-font-awesome/5267/2 "2020-11-25T08:29:38Z")

</div>

Font awesome needs two things.

The external CSS.  
Use of classes.

See [https://www.w3schools.com/icons/fontawesome\_icons\_intro.asp](https://www.w3schools.com/icons/fontawesome_icons_intro.asp)

A very basic approach is to copy and paste that code on any page like index.md  
It doesn’t matter if your CSS is not in head, just get it to display as a first attempt.

After that works, then you can look at doing it the right way with CSS in the head tag.

It would be useful to have a link to your actual theme or repo

But the general idea is you need to find where the head tag is defined in maybe default.html layout or includes/head.html  
If the theme already has one of these, you should copy the file from the theme to your own project as is and add just the one CSS line you need.

Then you can use the FA classes anywhere on your site

---

<div class="post-metadata">

**Author:** ![gianpaolof](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/gianpaolof/32/2939_2.png) [@gianpaolof](https://talk.jekyllrb.com/u/gianpaolof)\
**Post date:** [November 25, 2020, 9:15am UTC](https://talk.jekyllrb.com/t/using-font-awesome/5267/3 "2020-11-25T09:15:15Z")

</div>

thanks @MichaelCurrin  
the link to my repo is

> **[gianpaolof/photorama](https://github.com/gianpaolof/photorama)**
>
> "PHOTORAMA" template for Jekyll. Contribute to gianpaolof/photorama development by creating an account on GitHub.

I will try later your suggestions. have a good day

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 25, 2020, 1:21pm UTC](https://talk.jekyllrb.com/t/using-font-awesome/5267/4 "2020-11-25T13:21:36Z")

</div>

I thought you had installed a theme by selecting it in your config but I see you forked the theme.

Add font awesome to head.html around here

> <https://github.com/gianpaolof/photorama/blob/gh-pages/_includes/head.html#L30>

---

<div class="post-metadata">

**Author:** ![gianpaolof](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/gianpaolof/32/2939_2.png) [@gianpaolof](https://talk.jekyllrb.com/u/gianpaolof)\
**Post date:** [November 25, 2020, 1:57pm UTC](https://talk.jekyllrb.com/t/using-font-awesome/5267/5 "2020-11-25T13:57:00Z")

</div>

yes I forked it and added this part:  
script src=“[https://kit.fontawesome.com/](https://kit.fontawesome.com/){{ site.font\_awesome }}” crossorigin=“anonymous”\>\</script

(basically I’ve used the same approach of “uno theme” but this time is not working) 😃

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 25, 2020, 7:57pm UTC](https://talk.jekyllrb.com/t/using-font-awesome/5267/6 "2020-11-25T19:57:42Z")

</div>

I am not familiar with the uno theme and you haven’t shown a link to where uno itself uses the setup

Can you indicate what you mean by not working? Does the JS file you added load or give a 404? Have you added any font awesome icons on your page?

Are you after using svgs or fonts or some JS animation? It looks like font awesome does a lot.

Here it says there is a CSS and JS file so maybe you need both.

> **[Font Awesome](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers)**
>
> The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

I’d start with the W3 tutorial I linked before. And in the Test window on that site you can add your kit link there and test the icons or whatever works. Without using Jekyll. It easier to test in a more limited environment and then move your working code to Jekyll

---

<div class="post-metadata">

**Author:** ![gianpaolof](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/gianpaolof/32/2939_2.png) [@gianpaolof](https://talk.jekyllrb.com/u/gianpaolof)\
**Post date:** [November 25, 2020, 8:35pm UTC](https://talk.jekyllrb.com/t/using-font-awesome/5267/7 "2020-11-25T20:35:32Z")

</div>

I can’t add more than one link per post cause I’m a new user.  
I must look at the tutorial, the css of this theme is complex for me.  
Thanks for your input!
