Trying to use an icon picker from the backoffice and just can't get the icons to render on the front end at all. What font library does Umbraco use? Font Awesome, Icomoon, something else?
Where are the font files stores e.g. the path on disk so that I can import them in to my template?
I suppose one option would be to convert the name of the icon selected, i.e., activity, to icon-activity.svg. You could download these SVGs and put them somewhere in your project to serve them on your website.
So it looks like I can use img src="/umbraco/assets/icons/nameOfIcon.svg but the issue here is I can't apply a colour to the svg, they all come out black.
I'm getting to the point where I might give up on this now :)
So annoying that the backoffice has these icons but it seems really difficult to use them on the front end.
From my understanding, it's not possible to apply CSS styling to an SVG that's been embedded using an <img> or <object> tag. It'd need to be embedded as a literal <svg>, (unless if someone knows otherwise?)
That said, here's an approach you could take, re-using Umbraco services.
This is what I've managed to come up with so far and it's now rendering the icons out to the front.
@foreach (var menu in Model)
{
if (menu.Content is NavItem navItem && navItem.Link != null)
{
var iconCleaned = string.Empty;
var myIcon = new Umbraco.Cms.Core.Models.IconModel();
if(navItem.Icon != null)
{
iconCleaned = navItem.Icon.Split(' ').First();
myIcon = _iconService.GetIcon(iconCleaned);
}
<li class="nav-item active">
<a class="nav-link" href="#">
@if(myIcon != null)
{
<i class="my-icon">@Html.Raw(myIcon.SvgString)</i>
}
Blog Home 2 <span class="sr-only">(current)</span></a>
</li>
}
}
I've had to split the Icon Name as it comes with a colour attached to it but I'm now wondering if I could take that value and add it to the css somehow so that the colour picker also works......
Ah yeah, I'd forgot that the colour was stored in the value too. From what I can tell, it'll always be the first part, so should be fine doing what you've done.
I think Umbraco 7 (aka Belle) originally used font icons from this project https://hlvticons.ch/
Later the icons was included as SVG icons, while the font icons still existed.
If you use Gulp or similar you can build a SVG spritesheet from individual SVG files and style on these although it has some limitations as the CSS affect the entire SVG and one can't target a specific shape/path as with inline SVG.
What font library does Umbraco use?
Trying to use an icon picker from the backoffice and just can't get the icons to render on the front end at all. What font library does Umbraco use? Font Awesome, Icomoon, something else?
Where are the font files stores e.g. the path on disk so that I can import them in to my template?
Cheers.
From what I see in Umbraco 10, they are using SVGs.
I suppose one option would be to convert the name of the icon selected, i.e.,
activity, toicon-activity.svg. You could download these SVGs and put them somewhere in your project to serve them on your website.So it looks like I can use
img src="/umbraco/assets/icons/nameOfIcon.svgbut the issue here is I can't apply a colour to the svg, they all come out black.I'm getting to the point where I might give up on this now :)
So annoying that the backoffice has these icons but it seems really difficult to use them on the front end.
From my understanding, it's not possible to apply CSS styling to an SVG that's been embedded using an
<img>or<object>tag. It'd need to be embedded as a literal<svg>, (unless if someone knows otherwise?)That said, here's an approach you could take, re-using Umbraco services.
In your Razor view, inject
IIconServiceThen you can use that to get the SVG source of the icon, (as that's how it's done within the CMS backoffice).
Then output the raw/source SVG markup... (of course check for null)
Then you can apply custom styling...
I hope this helps?
Cheers,
- Lee
You sir are a lifesaver!!
This is what I've managed to come up with so far and it's now rendering the icons out to the front.
I've had to split the Icon Name as it comes with a colour attached to it but I'm now wondering if I could take that value and add it to the css somehow so that the colour picker also works......
Ah yeah, I'd forgot that the colour was stored in the value too. From what I can tell, it'll always be the first part, so should be fine doing what you've done.
Hi Owain
I think Umbraco 7 (aka Belle) originally used font icons from this project https://hlvticons.ch/
Later the icons was included as SVG icons, while the font icons still existed.
If you use Gulp or similar you can build a SVG spritesheet from individual SVG files and style on these although it has some limitations as the CSS affect the entire SVG and one can't target a specific shape/path as with inline SVG.
Another option is to create a Tag Helper to read the physical SVG file and render the SVG inline.
Thanks Bjarne, I like the idea of the tag helper actually. That would potentially get all the logic code out of my razor view and in to codebehind.
It actually looks like Warren might have already done something with his Tag Helper package that will work or at least, get me close.
https://our.umbraco.com/packages/website-utilities/our-umbraco-taghelpers/
Great suggestion. #h5yr
O.
is working on a reply...