4 Replies - 243 Views - Last Post: 16 January 2018 - 04:29 AM

#1 Splashsky   User is offline

  • D.I.C Regular

Reputation: 11
  • View blog
  • Posts: 311
  • Joined: 25-August 13

Gradient for SVG/FA5?

Posted 17 December 2017 - 08:56 PM

So, I'm building my web project and I've got a new navigation bar style I'm testing. I'm using FontAwesome 5 for the icons and such, and it's being used for the navigation, but I'd like to color/gradient those icons when :hover happens... color is easy. Gradient doesn't seem to be as simple. I used the background-clip for the main header text... I wanted to do the same with the nav icons but it didn't work :P

h1 {
    text-transform: uppercase;
    font-size: 3rem;
    letter-spacing: 1rem;
    margin: 0px auto;
    //color: rope(water);

    // Gradient text!
    color: transparent;
    text-transform: uppercase;
    background-image: linear-gradient(to top, #4facfe 0%, #00f2fe 100%);
    -webkit-background-clip: text;
    background-clip: text;
}



#nav {
    position: fixed;
    top: 0;
    left: 0;
    background-image: url('../img/navbar.png');
    height: 510px;
    width: 50px;
    padding-left: 0.5rem;
    padding-top: 4rem;

    a.icon {
        font-size: 2rem;
        color: color(carbon);
        -webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.8));
        filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.8));

        &:hover {
            color: #4facfe;
        }

        svg {
            width: 36px;
        }
    }
}



Posted Image

Is This A Good Question/Topic? 0
  • +

Replies To: Gradient for SVG/FA5?

#2 andrewsw   User is online

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,619
  • Joined: 12-December 12

Re: Gradient for SVG/FA5?

Posted 18 December 2017 - 02:34 AM

It seems possible from a very quick search:

Gradient on Font-Awesome Icon (on hover)

Please show your attempt.

(Of course, if your icons are small enough, then the effect might not be noticeable.)
Was This Post Helpful? 0
  • +
  • -

#3 nensi.panjwani   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 8
  • Joined: 10-January 18

Re: Gradient for SVG/FA5?

Posted 16 January 2018 - 03:40 AM

Hi,

You can also try different Gradient for SVG like this <mod: dubious link removed>

Thanks.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is online

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,619
  • Joined: 12-December 12

Re: Gradient for SVG/FA5?

Posted 16 January 2018 - 03:49 AM

That's the same code as the link I provided. What's going on?!
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw   User is online

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,619
  • Joined: 12-December 12

Re: Gradient for SVG/FA5?

Posted 16 January 2018 - 04:29 AM

nensi.panjwani I have removed your link as it is a strict copy and paste of another person's code under a different username.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1