-
Notifications
You must be signed in to change notification settings - Fork 12.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Gradients on FA v5 icons #11925
Comments
Hi, I'm not sto much into SVG icons and javascript. I've found this workaround on SO: https://jsfiddle.net/tagliala/f019sa7v/2/ Ref: #https://stackoverflow.com/questions/10894377/dynamically-adding-a-svg-gradient Maybe it is possible to add a feature to use icons as clippath or add extra properties to the generated svg |
@tagliala the jsfiddle example is not working on my end (MacOS / Chrome v63) but I believe that SVG gradients definitions with Javascript are a real pain. Even if I could pass a The cleanest -and pure CSS- way would be that I could use FA web font instead of SVG icons |
I just spelled out a static solution on SO: https://stackoverflow.com/a/47801536/4996779 |
@ccprog Thanks, your solution works like a charm. |
Note that this is not running with React in this demo 🙂 |
@jebarjonet maybe I got you wrong(?!), but I'm using @ccprog's solution in react |
@CanRau yep, but I really wanted to generate gradients on the fly as simply as a css line |
@jebarjonet would definitely be preferable 👍 |
Having a hard time with @ccprog's solution using Vue and with webpack. I managed to get webpack to inline the svg in the |
@r-tanner-f have you tried to preserve the reference instead of inlining it in the css like in ccprog's answer? i don't know but it might not work like this.. |
For anyone still trying to achieve this effect with Font Awesome (5.0.13 as of this comment) working with JS and SVG, @ccprog 's solution above worked for me. I had several icons that I wanted to apply a gradient to; I didn't care about hover, I just wanted it on there. Here are the steps I followed to achieve this effect:
<svg width="0" height="0">
<linearGradient id="lgrad" x1="100%" y1="100%" x2="0%" y2="0%" >
<stop offset="0%" style="stop-color:rgb(252,207,49);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(245,85,85);stop-opacity:1" />
</linearGradient>
</svg>
.parent-div svg * {
fill: url(#lgrad);
} Done! See this JSFiddle for an example. |
Thanks, @stavvie34 .This will get you into troubles inside of a loop because you can't use the same id for multiple elements. You can't use v-bind:style here because we need to have the same id in both CSS and SVG. Here an example of what I could do hoping it will help someone. <template>
<!-- ... -->
<Fa :icon="[ 'fab', child.icon ]" />
<svg width="0" height="0">
<linearGradient :id="'lgrad' + child.id" x1="100%" y1="100%" x2="0%" y2="0%">
<stop ... />
<stop ... />
</linearGradient>
</svg>
<!-- ... -->
</template>
<script>
export default {
// Our prop
// child: {
// id: 4,
// icon: 'js',
// },
mounted() {
let style = document.createElement('style');
style.type = "text/css";
style.appendChild(document.createTextNode(''));
this.styleNode = style.childNodes[0];
document.head.appendChild(style);
// The magic
let css = '.fa-' + this.lang.icon + ' * {fill: url(#lgrad' + this.child.id + ');}';
this.styleNode.textContent = css;
},
props: {
child: Object,
},
}
</script> I guess it can also be done using CSS variable but I could't find a way to get the prop inside the |
@stavvie34 Amazing thanks! You saved me <3 |
Have you considered using a mask to accomplish this? Here's a quick codepen demoing what I;m thinking. |
Thank You! |
In case it helps anyone (it took me a while to find) to get this working in angular-fontawesome you need to add a custom class: |
I don't like these solutions because I am working with I found a workaround for MY problem : To achieve that, I am using FontAwesome layers & mask : <span className="fa-layers fa-fw">
<FontAwesomeIcon
className="gradient"
icon="circle"
mask="square-full"
color="white"
/>
<FontAwesomeIcon
icon="check"
inverse
transform="shrink-6"
/>
</span> .gradient {
background: linear-gradient(
180deg,
rgba(94, 189, 62, 1) 34%,
rgba(255, 185, 0, 1),
rgba(247, 130, 0, 1),
rgba(226, 56, 56, 1),
rgba(151, 57, 153, 1),
rgba(0, 156, 223, 1) 91%
);
} Here is a live demo : https://codepen.io/SylvainDNS/pen/ZEpXEEZ |
Hi guys, when using
|
I liked the fact that FA < v4 was a font so that I could apply a CSS gradient on it (ex: http://jsfiddle.net/HGxMu/220/)
I am currently using
react-fontawesome
which outputs SVG icons, on which I can not apply CSS gradients. Is there a way to either:The text was updated successfully, but these errors were encountered: