jpswalsh/academicons

strange icon showing instead of google scholar

Closed this issue · 3 comments

ppxasjsm commented

My css/html knowledge is basically not existent. I am trying to build a website from a html5 template and wanted to add a google scholar icon using academicons, using the following:

<ul class="icons">
<li><a href="https://github.com/ppxasjsm" class="icon style2 fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://github.com/ppxasjsm" class="icon style2 ai ai-google-scholar-square"><span class="label">Scholar</span></a></li>
</ul>

I get the following icon displayed:
screen shot 2017-11-07 at 22 48 10

I have followed the instructions for academicons for the incorporation with FontAwesome.
I can get the right icon displayed if I change my css of the icon to:

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

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

but then none of the other icons display. I realise this is probably somewhat trivial, but I have been trying to google this issue to no avail.
screen shot 2017-11-07 at 22 52 32

fonts directory

FontAwesome.otf           academicons.woff          fontawesome-webfont.woff
academicons.eot           fontawesome-webfont.eot   fontawesome-webfont.woff2
academicons.svg           fontawesome-webfont.svg
academicons.ttf           fontawesome-webfont.ttf

css directory:

academicons.css      font-awesome.min.css ie9.css
academicons.min.css  ie8.css              main.css
jpswalsh commented

What does the style2 CSS do?

TT-- commented

I had the same problem when I had not set class="ai" on my <i> tag. Changing to class="ai ai-google-scholar" made it display correctly. (ie something is overriding your font property that is set in ai class. seems that would come from your style2)

RicardaBeckmann commented

Probably a bit late but I just had the exact same issue and found a solution. As @TT-- mentioned above, the problem is that the font-family property is being overwritten in main.css

To get both academicons and fontawesome to work properly, comment out the font-family attribute of the block you are struggling with, and then make sure you call each class explicitly.

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

In the html file, call icons from either group as follows:

              <li class="fa fa-envelope"><a href="#">Display text</a></li>
              <li class="ai ai-orcid"><a href="#">Display text</a></li>

Make sure you either use "fa fa-name" or "ia ia-name", depending on where the symbol comes from!