search

jpswalsh / academicons

An icon font for academics
https://jpswalsh.github.io/academicons
798 stars 102 forks source link

Alignment issue #17

Closed dpo closed 8 years ago

dpo commented 8 years ago

Thanks for creating these icons! I'm trying to use them in a Jekyll site based on the beautiful Jekyll template. There's a row of (stacks of) Font-Awesome icons in the footer: screen shot 2016-04-04 at 17 37 59 But as soon as I include the Academicons css, their alignment gets out of whack: screen shot 2016-04-04 at 17 39 09 If I try to add an Academicon to the row, I get this nonsense: screen shot 2016-04-04 at 17 39 36 I apologize for my ignorance of all things css, but do you have any idea where the conflict might come from? The code for the footer is here.

Thanks in advance!

dpo commented 8 years ago

Thanks. I don't have a live version of the site yet, but it seems that the <span> elements in the footer template were causing trouble. I removed them along with the icons stacks to only use square icons and things align nicely now:

screen shot 2016-04-13 at 12 50 09

Just in case someone else has the same issue.

jonbra commented 7 years ago

I had the exact same issue of alignment using a different jekyll template, Minimal Mistakes. (And I also note a slight difference in space between the Academicons).

screen shot 2017-01-27 at 19 26 56

But I can't find any span elements causing trouble. Do you know more about what was causing the mis-alignmet?

dpo commented 7 years ago

I'm really not sure as my understanding of those things is very limited, but it might have to do with the css used to display the icons?! https://github.com/mmistakes/minimal-mistakes/blob/afb1ed4aad4a12e8c3102807016358edb0c46c03/_sass/_sidebar.scss#L127

jonbra commented 7 years ago

You're right. Changing from ai-1x to ai-fw fixed the horisontal alignment, and I added margin-bottom: 8px; to the .css to fix the vertical spacing between the elements.

jpswalsh commented 7 years ago

Jon, I just took a look at your site and I noticed that the two academic links are within the same <li> tag. Could that be the source of your vertical spacing problem? The aria-hidden property is also not defined for the new icons, but it is for the FontAwesome icons.

In any case, it looks good and I'm glad you got it working!

jonbra commented 7 years ago

Thanks! That fixed the vertical spacing so I could remove margin-bottom:

fernandoandreotti commented 6 years ago

Have a look at issue #3, re-ordering these declarations solved this for me. I was trying to add logos to the footer of a site based on the beautiful-jekyll template.

That is, on base.html

common-ext-css:
  - "/css/academicons.min.css"
  - "//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"