Fontawesome free icons are used as page icons like
<html><head>
<link rel='icon' href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/pen-to-square.svg'>
</head></html>
Black icon appears is Chrome tab:
How to change this icon color?
Bootstrap 5 is also used. Inside html page color can changed using bootstrap text-danger class like
<i class="fa-regular fa-pen-to-square text-danger"></i>
or using style:
.fa-pen-to-square {
color: red;
}
How to change page icon color also ?
This is ASP.NET 9 MVC application using FontAwesome free SVG icons, Bootstrap 5, jquery and jquery ui.
Update
It looks like color attribute like
fill = "#AB7C94"
should be injected to SVG as described in How can I change the color of an 'svg' element?
and inline data uris should used for page icons.
Colors are specified as html color names. How to use html color names in svg or covert them to color hex values required in svg?
Or can svg filter applied to FontAwesome icons? No sure will FontAwesome free icon license allow icon modifications.
-
2Unfortunately, the favicon color cannot be dynamically changed using CSS classes or styles applied in the HTML because the browser renders the favicon as a standalone image resource, separate from the DOM. To change the color of a FontAwesome icon used as a favicon, you need to modify the SVG file itself.Saikat...– Saikat...2024年11月16日 21:11:21 +00:00Commented Nov 16, 2024 at 21:11
-
SVG file is loaded from CDN. Where to find CDN which allows to download colored free site icons or allows to specify color? Or how to create controller in C# which pre-processes SVG from CDN url to change color? Or is there some online color changer application? I can change SVG color using this and serve colored SVG from my site instead on CDNAndrus– Andrus2024年11月16日 21:43:11 +00:00Commented Nov 16, 2024 at 21:43
-
Most CDNs, including FontAwesome, serve their SVGs in a default black color or without color. They don’t provide dynamic color customization. However, you can: Search for services that allow color customization in SVGs dynamically (though these are rare and usually not free). Tools like SVGOMG or similar SVG editors let you upload and edit SVG files.Saikat...– Saikat...2024年11月16日 21:49:17 +00:00Commented Nov 16, 2024 at 21:49
-
Where to find C# code which reads SVG and changes its color? This code and used to pre-process FontAwesome SVGs from CDN.Andrus– Andrus2024年11月16日 22:08:46 +00:00Commented Nov 16, 2024 at 22:08
-
@Saikat... You gave the right answer. I think you should rewrite your comments as an answer and get credits for it.philippe_b– philippe_b2024年11月17日 18:59:15 +00:00Commented Nov 17, 2024 at 18:59
1 Answer 1
Unfortunately, the favicon color cannot be dynamically changed using CSS classes or styles applied in the HTML because the browser renders the favicon as a standalone image resource, separate from the DOM. To change the color of a FontAwesome icon used as a favicon, you need to modify the SVG file itself.
Most CDNs, including FontAwesome, serve their SVGs in a default black color or without color. They don’t provide dynamic color customization. However, you can: Search for services that allow color customization in SVGs dynamically (though these are rare and usually not free). Tools like SVGOMG or similar SVG editors let you upload and edit SVG files.
1 Comment
wwwroot\lib\font-awesome\sprites folder in three xml files. Where to find c# code a code to extract svg from icon class name from those files and inject color into this svg by html color name? Is there xml parser which reads those files sequentially and stops after svg is found?Explore related questions
See similar questions with these tags.