SME has a range of predefined font icons the size and characters used for these icons may change with the current Themes.
All icon classes must be used in conjunction with the following class:
.sme-icon
The sme icon size classes can be used to change the size of an icon. The default size depends on the typographical context of the icon. ie. The icon will be larger in an h1 tag than in a label tag.
Use the following class structure to manually apply an icon size
.sme-icon-size-[size]
While the characters may change with the theme. You can use the name to indicate the purpose of the icon.
To accomplish this, use the following class structure:
.sme-icon-[name]
Here is the current list of icons and their names:
Putting it all together, we can create a large server icon using the following classes
sme-icon sme-icon-size-lg sme-icon-server
The SME icon set doesn't include every possible icon. As such it may become necessary to use some of your own icons. However, try and use a built in icon as much as possible.
To create your own custom icons that adhere to the icons layout requirements of sme you should use the following technique:
After this your class might look like
sme-icon sme-icon-size-lg my-icon my-icon-custom
In addition your css might look like
.my-icon {{'{'}} font-family: 'MyGlyphs' }
.my-icon-custom {{'{'}} content: '\E123' }