search

FortAwesome / angular-fontawesome

Official Angular component for Font Awesome 5+
https://fontawesome.com
MIT License
1.48k stars 150 forks source link

Feature request: inset gradients! #173

Open SteamWind opened 5 years ago

SteamWind commented 5 years ago

Describe the problem you'd like to see solved or task you'd like to see made easier

A way to apply inset gradients on icons.

Is this in relation to an existing part of angular-fontawesome or something new?

This is new for angular-fontawesome but not for Font-Awesome as described here: https://github.com/FortAwesome/Font-Awesome/issues/11925

What is 1 thing that we can do when building this feature that will guarantee that it is awesome?

Make it easy to use 🌟

Why would other angular-fontawesome users care about this?

Because gradients are beautiful ✨

On a scale of 1 (sometime in the future) to 10 (absolutely right now), how soon would you recommend we make this feature?

6 - This feature was easy to implement with the oldest version...

Thank you for your precious work!

devoto13 commented 5 years ago

As discussed in the linked issue it is not possible to use CSS gradients with SVG icons, so you'll have to use SVG gradients instead. The solution described in https://github.com/FortAwesome/Font-Awesome/issues/11925#issuecomment-393975346 should work with angular-fontawesome as well. Does it work for you?

fa-icon ::ng-deep svg * {
  fill: url(#lgrad);
}

As for the nicer API I'm not sure:

Having said that I would like to hear more ideas and feedback on this feature request.

seanreiser commented 5 years ago

Have you considered using a mask to accomplish this,? Here's a codepen I through together using a rainbow gradient for the apple icon.

https://codepen.io/seanreiser/pen/QWLaZZp

SteamWind commented 5 years ago

Only if this was such easy. @seanreiser this is the angular component. Here is an exemple with your solution: https://stackblitz.com/edit/fontawesome-angular-gradient-background-173

devoto13 commented 5 years ago

@SteamWind https://stackblitz.com/edit/angular-z8v4ux-5jecuk

SteamWind commented 5 years ago

Nice solution @devoto13 ! I modified your solution to work with any icons with a specific class.

https://stackblitz.com/edit/fontawesome-angular-gradient-background-fix-173

This could be documented somewhere?

SteamWind commented 5 years ago

The only problem with this solution is that you can't have a transparent mask... I consider this should not be an end solution. I let this open as it could be a feature.

devoto13 commented 5 years ago

This could be documented somewhere?

Sure. Was thinking to introduce a Recipes section in the documentation to include docs on how to implement common things. I'll take a look at it, when I have time.

The only problem with this solution is that you can't have a transparent mask.

Can you provide an example of what is "transparent mask"? Something like this?

SteamWind commented 5 years ago

Nice effect but no, I mean, if you already have a gradient in background of your icon, the square mask cover a part of it. It's the principle of the mask. You can see what I mean here:

image

Also, if you don't know the background color, that's a problem...

nook24 commented 2 months ago

Is it possible to disable SVG rendering with angular-fontawesome? When using the mask gradient workaround, the mask has an background color, which is ugly if the background color can be dynamic like on hover or so

grafik

Something like this would be perfect

<fa-icon
    [icon]="['fas', 'plug-circle-check']"
    [size]="'4x'"
    [svg]="false"
    class="my-gradient"></fa-icon>

Workaround

As this issue is open for 5+ years, I have have no hopes for a proper solution any time soon.

If you need to apply a gradient to angular-fontawesome, you need to use the mask option. The issue is, that your icon will have a background color, which will not work when you use the icon inside of a table where the background changes on hover or if the icon is placed on top of an image.

Also for some reason, the icon is clipped.

.status-production {
    background: radial-gradient(at 80% 72%, rgba(0, 200, 81, 1.0) 0%, rgba(0, 200, 81, 1.0) 30%, #4285F4 33%, #7DACF5 100%);
    color: var(--cui-body-bg); /* Dynamic bg-color for light and dark mode */
    display: inline-block;
}
<fa-icon
    [mask]="['fas', 'square-full']"
    [icon]="['fas', 'plug-circle-check']"
    [size]="'4x'"
    class="status-production"></fa-icon>

angular-fa-gradient-bg

My solution for this is, to import Font Awesome globally in styles.css.

@import "@fortawesome/fontawesome-free/css/all.css";

This enables the option to use Font Awsome as a web font and solves the gradient issue and I can also use the icons in third party libraries through the unicode value. Also no clipping.

.status-production {
    background-image: radial-gradient(at 80% 72%, rgba(0, 200, 81, 1.0) 0%, rgba(0, 200, 81, 1.0) 30%, #4285F4 33%, #7DACF5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
<i class="fas fa-plug-circle-check fa-4x status-production"></i>

fa-web-font-gradient