Tagged: , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 31, 2016 at 8:20 pm #606193
    Michae1

    Hi guys,

    I’m trying to decrease the size of the Social Icons in the footer WITHOUT shrinking the mobile menu icons. I changed the font-size in the following class but it affects ALL of the sizes. How can I target JUST the Social Icon size?

    
[data-av_icon]:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
    content: attr(data-av_icon);
    speak: none;
    font-size: 31px;
}
    March 31, 2016 at 8:45 pm #606220
    Josue

    Hey!

    Try changing your code:

    .social_bookmarks [data-av_icon]:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
    content: attr(data-av_icon);
    speak: none;
    font-size: 31px;
}

    Regards,
    Josue

    March 31, 2016 at 9:43 pm #606260
    Michae1

    Uhh! So friggin’ simple. Can’t believe I overlooked that. THANK YOU JOSUE!!

    Quick general CSS question : I don’t recognize what’s happening with the usage of the brackets [ ] or what exactly the “content” line is doing. Could you explain or point to a CSS resource that would? Is it a SASS thing? <- so much to learn :)

    March 31, 2016 at 9:54 pm #606266
    Jordan

    Hi!

    The [] is a CSS selector to target elements with a certain attribute. In this case it targets the attribute data-av_icon. You can read up more on CSS selectors here ([] is selector #10 in the link): http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048

    Regards,
    Jordan

    March 31, 2016 at 9:54 pm #606267
    Josue

    No Sass thing there, just plain CSS, the code to change the size could be simplified to (as it is already set in css/base.css):

    .social_bookmarks [data-av_icon]:before {
    font-size: 31px;
}

    Brackets in the CSS selector mean attribute, so we’re catching all elements with an attribute of data-av_icon="value" and the content property is fetching that value and using that as “content”, you can use content on pseudo-selectors :after and :before (it’s like creating HTML with CSS).

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.