-3

I know that font awesome will normally inherit the anchor color. However, I am finding it turns my links blue. Upon investigation I found this rule was the culprit:

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

I was actually able to fix the problem by adding a tabindex attribute to the element. My question is if there is a non-hack way to fix this?

BTW, the reason I am matching this rule is because I am using routing attributes in Angular 2 which prevents it from having an href.

Cacoon
  • 2,467
  • 6
  • 28
  • 61
Leslie Hanks
  • 2,347
  • 3
  • 31
  • 42
  • So, this doesn't really have anything to do with icon fonts? – sheriffderek Feb 24 '18 at 01:50
  • https://jsfiddle.net/sheriffderek/u2xk85a8 – sheriffderek Feb 24 '18 at 01:53
  • This does have to do with FontAwesome 5 specifically. If you use an icon inside an anchor without either an href or tabindex, it will not inherit it's color from the anchor tag. That is because the rule listed above from FontAwesome is causing the anchor to inherit instead of using the anchor color. – Leslie Hanks Feb 24 '18 at 03:25
  • That is just general CSS and how it works, not to do with font awesome itself and you shouldnt have tagged it – Cacoon Feb 24 '18 at 03:56
  • Just give `a:not([href]):not([tabindex])` whatever colour you want in your stylesheet. Use `color: -webkit-Link; color: -moz-HyperlinkText` if necessary. – Mr Lister Feb 24 '18 at 08:59

1 Answers1

0

If you take a step back and think about the 'cascade' in Cascading Style Sheets, you can forget "I know that font awesome will normally inherit the anchor color. However..." and just write your rules regardless of Angular or font-awesome. If some include rule is annoying... delete it.

I'm not sure what version of Angular you are using - or really how it works these days... but in a few of the 5+ versions - it was suggested that you keep the href in there - but with no value. <a href class='button'>... - so, check that as a possibility. Something here might help: Valid to use <a> (anchor tag) without href attribute?

JSfiddle

https://jsfiddle.net/sheriffderek/kzrnq7Ly/22/


Markup

<p>A <a href><span>standardd link</span></a> in a paragraph.</p>

<!-- example component that might use icons -->
<nav class="social-networks">
  <ul class="network-list">
    <li class="network name">
      <a href class="link">
        <i class="fa fa-pencil"></i>
      </a>
    </li>

    <li class="network name">
      <a href class="link">
        <i class="fa fa-trash"></i>
      </a>
    </li>

    <li class="network name">
      <a href class="link">
        <i class="fa fa-align-justify"></i>
      </a>
    </li>
  </ul>
</nav>


Styles

/* general setup */
a {
  display: block;/* big touchable areas */
  text-decoration: none;
  color: inherit;
}

a:hover {
  cursor: pointer;
}

ul { /* probably already in your 'reset' */
  margin: 0;
  padding: 0;
  list-style: none;
}

p a {
  display: inline-block;
  text-decoration: underline;
  color: darkgray;
}

p a:hover {
  color: red;
}

/* 3rd party setup */
.fas {
  color: inherit;
  /* this is what you probably want */
  /* or you have some conflicting rules */
  font-size: 30px; /* a default? nope... doesn't work */
}

/* specific component */
.social-networks .network-list {
  display: flex;
  flex-direction: row;

  color: lightblue;
  transform: translate(-1rem, 0)
}

.social-networks .link {
  font-size: 30px;
  padding: 1rem; /* lots of space for fingers */
  transition: .5s;
}

.social-networks .link:hover {
  color: red;
  transition: 0s;
}

The bigger question is if an in-singlepageapp "link" should even be an anchor tag in the first place...

sheriffderek
  • 8,848
  • 6
  • 43
  • 70