Click on an image to make it bigger.
D7 Text Editor - OSU CKEditor Plugins - Icon Picker - Create Content

1. Create Some Content

Go to Admin Menu > Content > Add Content > Content Type of your choice.

D7 Text Editor - OSU CKEditor Plugins - Icon Picker - Change Text Format to Full HTML

2. Change Text Format

Change the Text Format to Full HTML to display the Button Picker toolbar button.

D7 Text Editor - OSU CKEditor Plugins - Icon Picker - Click Icon Picker

3. Open Icon Picker

Click on the Icon Picker toolbar button to open its dialog box.

D7 Text Editor - OSU CKEditor Plugins - Icon Picker - Dialog Box with OSU Icons Appears

4. Icon Picker Dialog Box

The OSU Icon Picker dialog box opens.

D7 Text Editor - OSU CKEditor Plugins - Icon Picker - Select OSU Icon

5. Select OSU Icon

Select an icon within the OSU Icons tab.

After clicking on the icon of choice, a sample of the selected icon will appear in the upper right corner of the dialog box.

D7 Text Editor - OSU CKEditor Plugins - Icon Picker - Change Size and Color

6. Change Icon Size and Color

Change the color by selecting one of the colors in the provided palette: Orange, Black, Silver, Blue, Light Blue, Green, White, Yellow, Light Green.

Adjust the size by clicking on one of the size buttons: Small, Medium, Large, or Extra-Large.

Click the OK button.

D7 Text Editor - OSU CKEditor Plugins - Icon Picker - OSU Icon Added

7. OSU Icon Added

The icon will be added into the text editor using the selected color and size.

D7 Text Editor - OSU CKEditor Plugins - Icon Picker - Select Font Awesome Icon

8. Open Font Awesome Icon Tab

Click the Icon Picker toolbar button to reopen the dialog box.

Once the dialog box opens, click the Font Awesome tab.

Select an icon and apply any desired color or size changes to it.

Click the OK button.

D7 Text Editor - OSU CKEditor Plugins - Icon Picker - Font Awesome Icon Added

9. Font Awesome Icon Added

The Font Awesome Icon will appear next to the OSU Icon.

Note how the two styles are very different. It's suggested that they not be used together.

Click the Save button.

D7 Text Editor - OSU CKEditor Plugins - Icon Picker - Completed Icons Added

10. Icons Completed

Related Video

Please note that videos which are provided from a source outside of OSU may not completely reflect OSU systems. Instead, use the provided video as a general guide to working with this particular subject.