Change style of icon

[gromain]

Hi,

Interesting mod, but I couldn't find how to customize the style of the used icon. For example, if I want to change the color and animation of the icon, I used to do <i class="fa fa-beat fa-heart" style="--fa-animation-duration: 2s; color: orangered;"></i>.

Is there a way to do this?

[kdevo]

Hi,

Sure! There are multiple ways to achieve this. One way is by putting the icon inside a div:

<div id="my-heart">
  {{ partial "icon" (context . name "fas heart") }}
</div>

And add a CSS rule such as:

#my-heart {
  fill: orangered;
}

An alternative would be to use the svg-use-advanced icon loader where you can fully control what is rendered and can therefore also apply the style directly as needed. This is demonstrated in exampleSite/layouts/gallery/gallery.html.