[Solved] CSS Selector for transition on linked icon font

[isaac gregson]

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?

[Paulie_D]

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.

[isaac gregson]

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)?

[andreas78]

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

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

[Paulie_D]

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

[isaac gregson]

Thanks for the insight, folks.

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

[Author]

Posts