CODEWITHSUNDEEP
htmlcsssvgsitecoresitecore-mvc
Nil Pun
Nil Pun

Reputation: 17373

How to store menu font icons in sitecore

I've a sitecore solution where all menu navigation items are managed via sitecore. All good if we use png, jpg etc.

Now the FE guys wants to use the Fonts icons so that it's responsive and works on any browser devices.

One way to overcome this is by creating a class field in menu item where authors will specify the icon-class.

Problem with this is that authors will need to understand css classes and everytime new items needs to be created, they need to involve developers.

Is there a better way to overcome this? Or using png/svg images are best option.

Upvotes: 1

Views: 1008

Answers (3)

Derek Hunziker
Derek Hunziker

Reputation: 13141

I recently created a font icon picker field for Sitecore that sounds like it would meet your requirements. Authors can choose from one or more "collections", such as FontAwesome, IcoMoon, Foundation, etc., so they don't need to have knowledge of the CSS class names.

The field accepts configuration via JSON in the field's 'source'. Within the configuration, you can point to one or more CSS files that contain the icon classes, as well as control which ones are displayed (via regex). In other words, you do not need to define each and every CSS class, it will parse your CSS file(s) and display them automatically.

More Information

Download Market Module

Sitecore Font Icon Picker Field

Upvotes: 6

Wesley Lomax
Wesley Lomax

Reputation: 2077

I had the same issue on a project and created a custom Sitecore field to provide a searchable UI for the users to pick icons from.

SPEAK UI interface

The field also provides a preview of the selected icon on the item for the user.

Icon Preview

Its available as a module on the Sitecore Marketplace here Icon Selector Field

Upvotes: 2

Ahmad Harb
Ahmad Harb

Reputation: 615

You can write C# code that read all the font classes from the css font file, then save these classes into Sitcore items.

The Sitecore Items that you save will contain the class name in it's field.

Use this code to load the classes names : http://www.dotnetfunda.com/articles/show/3120/loading-css-class-names-in-csharp

Then change the datasource of the navigation items to the CSS classes items that you saved.

Upvotes: 0

Related Questions