Oceansoul Oceansoul - 1 year ago 56
CSS Question

Self-Study: Intergrating Font-awesome and Academicons

I am so new to HTML and CSS. I would like to work on a free template first to see what is going on behind the template. I using this free template. It uses font-awesome icons. And I know that font-awesome does not have some icons like Research-Gate and Academia et cetera... I would like to implement them by using Academicons. But I could not do it! I followed everything that has been written but it still does not show, let's say, Research-Gate icon! Could you please help me about tha? Thanks in advance!

Answer Source

It goes something like this in <head> tag.

a. Add font-awesome.css

b. add academicons.css (Must be specified before font-awesome)

c. Keep the directory like this -


To use it add it in your HTML. eg;

<i class="fa fa-check"></i><i class="ai ai-google-scholar-square fa-3x"></i>

Here, first one is font-awesome and second one is academicons.

Demo Here


Since you are using above specified template, which import all other css files in default.css

In this case you can put your academicons.css in css/font-awsome/academicons.css folder. Download the academicons.zip and extarct. Copy the fonts from fonts folder and paste it to css/font-awesome/fonts

Finally add <link rel="stylesheet" href="css/font-awesome/academicons.css"> in head tag.

Hope this help. Do comeback if any issue.