Loading ...

Custom Icons | Communifire Support

Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Edit navigation item

Required The name that will appear in the space navigation.
Required
Required
Required The url can point to an internal or external web page.
 
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Features and Functionality

Custom Icons

Subscribe to RSS
  • Can we upload / use custom icons in our nav widgets?

  • Hi Sierra,

    Are you referring to the icons on your Org Tools section or a different set of widgets?

    Thanks,
    Foster

  • No, I mean the small icons for example in "reminders"

    https://understood.communifire.com/

     

  • Hi Sierra,

    The navigation widgets use an icon font. Is there a certain icon font that you want to use? I can look into whether it's possible to use a different icon font.

    Or did you want to upload icon images? I can look into this as well.

    Grace

  • We're interested in uploading our own custom png icons, not a different font

  • Answered

    Hi Sierra,

    The screenshot you shared is a Navigation widget using the "Default Unordered Inline" template on your site, which uses the "Default Unordered List" button template to render each navigation item. We can update this template to allow image icons. Follow the steps below.

    1. Go to Control Panel > System > Page Builder Templates
    2. Select Button under Widget Type
    3. Select "Default Unordered List"
    4. Update the code to the following:
    <li class="{{CustomCSSClass}}">
        <a href="{{{Contents.URL}}}" {{Contents.ngCode}}>
            {{#if Contents.IconCSSClass}}<i class="{{IconCSSClass}}"></i>{{/if}}{{#if Contents.ForegroundImageURL}}<img class="btn-image-icon" src="{{Contents.ForegroundImageURL}}" />{{/if}}{{{WidgetTitle}}}
        </a>
    </li>

    This is the default template with an addition - it displays the navigation item's foreground image if it exists.

    1. Save the template
    2. Add the following code in CSS overrides, to size the image icon
    /*Style for image in Default Unordered List button template, for navigation widgets*/
    .btn-image-icon {
        max-width: 20px;
        margin-right: 15px;
    }

    To upload your own image icon for a navigation item:

    1. Edit the navigation widget
    2. Edit the navigation item
    3. Click Advanced
    4. Click Foreground image
    5. Upload your image and save it
    6. Save the item and widget

    The navigation item will look like below, and you can still use our built-in icons in the same widget.

    Let us know if you need help setting this up.

    Grace

  • How would the widget template code change if we wanted to do this for dropdown submenu instead of default unordered list?

    Sierra Zang
    Sierra Zang
    19 days ago
    Grace Kamau
    Grace Kamau
    6 days ago
Page 1 of 1 (7 items)