Minimal-mistakes: Use academicons as custom social network icon

[jonbra]

• [X] This is a question about using the theme.
• [X] I have updated all gems with bundle update.
  

  - [X] I have tested locally with bundle exec jekyll build.

Steps to reproduce the behavior

I found an icon on Academicons that I would like to add as a custom Icon and link for social networks under the author profile. I got the icon to appear (orcid icon), but it totally ruined the layout of the rest of the page. I downloaded the Academicons directory with css and fonts directories in i(put it on the root) and then linked to academicons.css as described on the web page using <link rel="stylesheet" href="/path/to/folder/css/academicons.css"/>.

My question is where do I put this link to a custom icon?

My repo: https://github.com/jonbra/jonbra.github.io

Thanks!

[mmistakes]

I'm not familiar with Academicons but from their site they were designed to work with Font Awesome (which is what the theme uses for icons).

Perhaps that isn't the case. Do you have an example of what it looks like when it breaks the layout?

I would suggest putting the CSS and fonts inside of the assets folder so they're in the same place as the rest of the theme assets. You can then link to them the same way as main.css in _includes/head.html.

<link rel="stylesheet" href="{{ '/assets/css/main.css' | absolute_url }}">

[jonbra]

Thanks,
I moved the css and fonts to assets and tried to link as you suggested. I get the icons to show (two of them in fact!), but again this breaks the layout.

[mmistakes]

How are you adding it to the sidebar? Looks to me like you either have some bad HTML or Liquid in there (possibly a missed closing tag that's breaking the rest of the page). Can you share the exact code you're using?

Only other thing I can think of is there's some CSS in that new file that conflicts with the theme. Can't really offer much help there if that's the case, since I didn't author it.

Good practice is to use your browsers web developer tools to inspect the problematic elements and it will show you the CSS being applied. You can track down what file is doing what and toggle things on/off to see if that fixes it.

[jonbra]

Ok, I see thanks.
I added the links to the css as mentioned above, and then I added this to author-profile-custom-links.html

But probably it's something with the new CSS

[mmistakes]

You're missing a closing quote in the class attribute on i.

 <li>
    <a href="http://orcid.org/0000-0003-0490-1175" itemprop="sameAs">
      <i class="ai ai-orcid-square ai-3x></i> ORCID
    </a>
  </li>

Should be this:

 <li>
    <a href="http://orcid.org/0000-0003-0490-1175" itemprop="sameAs">
      <i class="ai ai-orcid-square ai-3x"></i> ORCID
    </a>
  </li>

[jonbra]

Ah! Didn't see that..
Thanks for your help!!

[jonbra]

Sorry to bother you again, but do you know why the icon is not exactly aligned with the others? Is it something with the new css?

https://jonbra.github.io/

[mmistakes]

Could be. Can't really say. My guess is it has more to do with the actual font/icon and how it was designed. Their site says it was built to work with Font Awesome but the metrics could be off.

More of a question for the maintainer of those icons since I don't really know the specifics on them.

[jonbra]

I see, thanks again.

[bquast]

@mmistakes I am just adding this to my own site now (qua.st.), are custom header (for css link) and custom author profile links intended for this?