Using icons in rich text editor or form field

Luke Hook asked on September 5, 2018 12:27

Hi there, I'm creating a simple content banner in a Kentico 11 site. This widget will contain a simple icon and a line of text. Just the two fields.

How can I set a field to select a font icon from the standard font library? Can this be added through the rich text editor or is there a way I can set this to select the file from the relevant folder and manually add the svg path in my front end.

Thanks, Luke

Correct Answer

Brenden Kehren answered on September 5, 2018 15:18

The CKEditor which Kentico uses is very customizable. In fact, you can add 3rd party plug-in's farily easy. I'd suggest checking out Kentico's documentation regarding customizing the CKEditor.

Also, another very helpful article regarding configuring/customizing the CKEditor.

0 votesVote for this answer Unmark Correct answer

Recent Answers

Arun Kumar answered on September 5, 2018 14:41 (last edited on September 5, 2018 14:42)

You can use simple font icon tags inside rich text editors (Source View)

<i class="icon-plus" aria-hidden="true"></i>

you need to link the stylesheet that defines the icon font to the site where you are using text editor. See this link for reference.

0 votesVote for this answer Mark as a Correct answer

Luke Hook answered on September 5, 2018 15:07

Thanks Arun,

This is the kind of thing I'm looking at but the site is for a client that would be unable to insert custom html. I didn't know if there was a field type or extension of the rich text editor where they could select an icon and it would insert the icon tag. OR a selector type, similar to media/image selector where it would populate the field with the class name which I could inject in to the html.

Thanks, Luke

0 votesVote for this answer Mark as a Correct answer

Zach Perry answered on September 5, 2018 17:47

If you look at page types in the Admin, there is a field for selecting the Icon that probably has similar functionality as what you are looking for.

You could probably just use that control(FontIconSelector.ascx) as a basis for a custom form control to use.

0 votesVote for this answer Mark as a Correct answer