Highlighted

make font color exceptions in footer

Enthusiast ,
Jun 17, 2019

Copy link to clipboard

Copied

Hi,

If the bulk of the fonts in footer are a specific color, but I'd like to make some in yet another color... how can I achieve this?

I have unique ID for the fonts I want in alternative color, but they are not applying. Not sure what else. They're font awesome icons.

#socialIconID {

    color: #57b6e5;

    font-size: 38px;

    margin-left: -90px;

}

#socialIconID a {

    color: #57b6e5;

    }

#socialIconID a:hover {

    color: #3254bc;

    }

#socialIconID a:active {

    color: #5e32bc;

    }   

#socialIconID a:focus {

    color: #5e32bc;

    text-shadow: 1px 1px 1px #ccc;

    }     

.faStyle {

   

    display: inline-block;

    font-family: FontAwesome;

    font-size: 32px;

    font-style: normal;

    font-weight: normal;

    line-height: 1;

    -webkit-font-smoothing: antialiased;

}

.fab {font-family: "Font Awesome 5 Brands";}

HTML

<div class="social">

   <div id=socialIconID">

          <a href="">
<i class="fab faStyle fa-linkedin" aria-hidden="true"></i>

Do I need to apply socialIconID to the 'i' tag or the 'a' tag?

Views

351

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

make font color exceptions in footer

Enthusiast ,
Jun 17, 2019

Copy link to clipboard

Copied

Hi,

If the bulk of the fonts in footer are a specific color, but I'd like to make some in yet another color... how can I achieve this?

I have unique ID for the fonts I want in alternative color, but they are not applying. Not sure what else. They're font awesome icons.

#socialIconID {

    color: #57b6e5;

    font-size: 38px;

    margin-left: -90px;

}

#socialIconID a {

    color: #57b6e5;

    }

#socialIconID a:hover {

    color: #3254bc;

    }

#socialIconID a:active {

    color: #5e32bc;

    }   

#socialIconID a:focus {

    color: #5e32bc;

    text-shadow: 1px 1px 1px #ccc;

    }     

.faStyle {

   

    display: inline-block;

    font-family: FontAwesome;

    font-size: 32px;

    font-style: normal;

    font-weight: normal;

    line-height: 1;

    -webkit-font-smoothing: antialiased;

}

.fab {font-family: "Font Awesome 5 Brands";}

HTML

<div class="social">

   <div id=socialIconID">

          <a href="">
<i class="fab faStyle fa-linkedin" aria-hidden="true"></i>

Do I need to apply socialIconID to the 'i' tag or the 'a' tag?

Views

352

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 17, 2019 0
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

Linked text gets its colors from the link pseudo-classes

a { }

a:link { }

a:visited { }

a:hover, a:active, a:focus { }

If you want to be more specific than that, use an anchor class.

footer a.red{ color:red}

footer a.magenta {color:magenta}

<footer>

<a class="red" href="#">Red link</a>

<a class="magenta" href="#">Magenta link</a>

</footer>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 1
Enthusiast ,
Jun 18, 2019

Copy link to clipboard

Copied

OK, when I added ':link' next to the @socialIconID a { ....the correct color applied.

Why is my hover state color not applying?

#socialIconID a:hover {

    color: #3254bc;

    }

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 18, 2019 0
Adobe Community Professional ,
Jun 18, 2019

Copy link to clipboard

Copied

You're asking more questions and not providng much information.  What does "not working" mean?  As John said, for quickest answers post the URL to your problem page online so we're all on the same page.  Otherwise, it's just guesses.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 18, 2019 1
Adobe Community Professional ,
Jun 17, 2019

Copy link to clipboard

Copied

I have unique ID for the fonts I want in alternative color, but they are not applying.

What is not applying exactly? Can you show us the full page code?

Even better, a link to the page showing the issue you're trying to solve.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2019 1