Icons

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

Icon Sizes

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]
{{size}}

Icon Characters

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:

{{key}}

Example

Putting it all together, we can create a large server icon using the following classes

sme-icon sme-icon-size-lg sme-icon-server

Custom Icons

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:

  1. Use the .sme-icon and .sme-icon-size classes as usual
  2. derive your own class to change the font only
  3. derive a separate class to change the 'content' property of the icon

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' }