Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Owain Williams 479 posts 1410 karma points MVP 6x c-trib
    Mar 05, 2023 @ 12:57
    Owain Williams
    0

    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.

  • Mark Drake 133 posts 457 karma points c-trib
    Mar 05, 2023 @ 14:58
    Mark Drake
    0

    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, to icon-activity.svg. You could download these SVGs and put them somewhere in your project to serve them on your website.

  • Owain Williams 479 posts 1410 karma points MVP 6x c-trib
    Mar 05, 2023 @ 20:56
    Owain Williams
    0

    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.

  • Lee Kelleher 4020 posts 15796 karma points MVP 13x admin c-trib
    Mar 06, 2023 @ 11:22
    Lee Kelleher
    101

    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 IIconService

    @inject Umbraco.Cms.Core.Services.IIconService _iconService
    

    Then you can use that to get the SVG source of the icon, (as that's how it's done within the CMS backoffice).

    var myIcon = _iconService.GetIcon("icon-activity");
    

    Then output the raw/source SVG markup... (of course check for null)

    <div class="my-icon">
        @Html.Raw(myIcon.SvgString)
    </div>
    

    Then you can apply custom styling...

    <style>
        .my-icon > svg {
            height: 64px;
            width: 64px;
            fill: blue;
        }
    </style>
    

    I hope this helps?

    Cheers,
    - Lee

  • Owain Williams 479 posts 1410 karma points MVP 6x c-trib
    Mar 06, 2023 @ 12:18
    Owain Williams
    0

    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.

    @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......

  • Lee Kelleher 4020 posts 15796 karma points MVP 13x admin c-trib
    Mar 06, 2023 @ 13:02
    Lee Kelleher
    0

    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.

  • Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib
    Mar 06, 2023 @ 23:03
    Bjarne Fyrstenborg
    1

    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.

    <svg class="icon" viewBox="0 0 200 200" width="50px" height=100px">
        <use href="/dist/icons/icons.svg#my-icon" />
    </svg>
    

    Another option is to create a Tag Helper to read the physical SVG file and render the SVG inline.

  • Owain Williams 479 posts 1410 karma points MVP 6x c-trib
    Mar 07, 2023 @ 08:10
    Owain Williams
    0

    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.

Please Sign in or register to post replies

Write your reply to:

Draft