Using font awesome

Help
#1

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:


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 :smiley: )

REgards
Gianpaolo

#2

Font awesome needs two things.

The external CSS.
Use of classes.

See 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

1 Like
#3

thanks @MichaelCurrin
the link to my repo is

I will try later your suggestions. have a good day

#4

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

#5

yes I forked it and added this part:
script src=“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) :smiley:

#6

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.

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

1 Like
#7

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!

1 Like