strange icon showing instead of google scholar
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:
```html
<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:
<img width="125" alt="screen shot 2017-11-07 at 22 48 10" src="https://user-images.githubusercontent.com/3668316/32522082-c5e6107e-c40d-11e7-9e25-fb5289007043.png">

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:

```css
	.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. 
<img width="121" alt="screen shot 2017-11-07 at 22 52 32" src="https://user-images.githubusercontent.com/3668316/32522224-62958e36-c40e-11e7-8e21-38502d89e81b.png">

fonts directory
```bash
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:
```bash
academicons.css      font-awesome.min.css ie9.css
academicons.min.css  ie8.css              main.css
```
