Oceansoul Oceansoul - 5 months ago 15
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

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 -

--CSS
  --Fonts
  --font-awesome.css
  --academicons.css

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

---UPDATE---

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.