Adding academicons to home page

[lnalborczyk]

Hi, let me first thank you for all the good work on implementing this theme !

I would have a question about academicons (http://jpswalsh.github.io/academicons/). I tried to include these icons in the forty theme by placing the /css and the /font folders in the /static folder, and by pointing to the .css file in the custom_css in the config.toml file with custom_css = ["css/academicons.css"], but it does not seem to work...

Instead of the expected icon, it displays a Chinese (?) character... Would you have an idea of what is going wrong ?

[MarcusVirg]

Hi, so this is giving you a Chinese character because there is a font family property in the icon class in the main.css file. This is theme is mostly optimized for using font awesome icons but I was able to get around that and did get your academicons working along with font awesome icons. Here is how I did that:

Like you did, I downloaded the font files and the CSS file and placed them in their prospective folders (static/css/academicons.min.css) (static/fonts/all the font files). You linked the custom css correctly the in config.toml file with custom_css = ["css/academicons.min.css"]. The problem is that those social icons have an icon css class applied to them that specifically states the font family to be fontawesome so when you try and use another font family the webpage does not recognize the font to be in the font family, giving you weird characters. Doing this in the config.toml file won't work.

[[params.footer.social]]
      icon = "ai-dataverse"
      url= "https://www.linkedin.com"
      label = "LinkedIn"

Since I am unable to apply different CSS classes to the same range of elements. I recommend just coding in a separate icon in the footer.html partial. If you haven't already I recommend copying the layouts folder YourSiteDirectory/themes/forty/layouts into your own site layouts folder YourSiteDirectory/layouts Place this code in the footer.html partial underneath the {{ end }} of the {{ range .Site.Params.Footer.social }}:

<li><a href="#" class="icon alt ai ai-orcid" target="_blank"><span class="label"></span></a></li>

I added a css class, ai to this new element. to actually give properties to this new CSS class we have to edit the main.css file. Again I would recommend copying this file from the YourSiteDirectory/themes/forty/static/main.css location and moving it to the same spot that you placed your academicon.css file in the static folder. Once you do that go into the main.css file do a search for Icon. It should bring you to the /* Icon */ section in the CSS file. Right below the code

.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
		}

add in this code:

.ai:before{
	font-family: Academicons;
	     }

One last step, in the main.css file at the top of the file you should also import your academicons.min.css file. So insert this code at the very first line of the main.css file:

@import url(academicons.min.css);

Once I completed these steps I got the final result

Both icon sets still work and the same styling is also applied to both. Let me know if you had any questions or issues with the steps I provided. Thanks for using this theme!

[lnalborczyk]

Hi, thank you so much for your detailed answer. It works like a charm.

I also noticed that this:

[[params.footer.social]]
      icon = "ai-osf"
      url= "https://osf.io"
      label = "OSF"

should also work in the config.toml if we specify academicons as ai ai-icon, instead of ai-icon (example below).

[[params.footer.social]]
      icon = "ai ai-osf"
      url= "https://osf.io"
      label = "OSF"

Thanks !

[MarcusVirg]

Yes I see now that it would work since the icon front matter value is being inserted into the class definition. It is best to keep as much content as you can in the config.toml file for easy configuration. Nice job with that. I am glad my solution worked for you, thanks again!