Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] CSS Selector for transition on linked icon font

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #165380
    isaac gregson
    Participant

    Greetings,

    I’m trying to apply a transition effect on a linked icon font. Here’s the code:

    SASS

    // Link Transitions
    a
      +transition(all, .2s, ease-in-out)
      text-decoration: none
      outline: none
    
      &:hover, &:active
        outline: none
        +transition(all, .2s, ease-in-out)
    
    //social media icon font colors on hover
    .ai-facebook2:hover
            color: $facebookBlue
    .ai-twitter2:hover:hover
        color: $twitterBlue
    .ai-google-plus3:hover
        color: $googleplusRed
    

    HTML

    <ul class="list-inline>
      <li><a href="#"><span></span></a></li>
      <li><a href="#"><span></span></a></li>
      <li><a href="#"><span></span></a></li>
    </ul>
    

    I’ve tried a number of selector combinations but none of them have worked. If I put some text into the list item the transition works. Otherwise it doesn’t.

    Any ideas?

    #165382
    Paulie_D
    Member

    Where is the color applied to the icon font?

    How is the icon font used?

    You have defined classes but they are not shown in your HTML.

    Perhaps a Codepen would more useful.

    #165403
    isaac gregson
    Participant

    Hi Paulie

    Thanks for the reply. I’ve made a pen illustrating the problem. The problem area (selection of the icon fonts) is on line 29 in the SASS.

    THE PEN

    As you’ll see, the icon fonts are being targeted… only with the wrong color (two colors are being applied because of overlap in the selectors). Perhaps I just need to redefine the overall list selectors (the ones targeting the other text in the list)?

    #165407
    andreas78
    Participant

    shouldn´t you define a color in the link (a tag) first?

    just the a-tag needs the transition, not the hover.

    #165410
    Paulie_D
    Member

    Appling a color to the span and transitioning that would probably do it since you have no text in the spans.

    #165412
    isaac gregson
    Participant

    Thanks for the insight, folks.

    Managed to get it working. See the updated pen: THE PEN

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