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

1. Create Some Content

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

Title field = Add a title.

Text Format select field = Full HTML.

Once the Button Picker toolbar button appears, click it.

D7 Text Editor - OSU CKEditor Plugins - Button Picker - Combo - Add Text, Color, and Size

2. Add Button Data

In the OSU Button Picker dialog box:

Enter Button Text field = enter the text you want to use in your button.

Choose a Color options = select a color by clicking on it.

Choose a Size options = select a size by clicking on it.

Click the OK button.

D7 Text Editor - OSU CKEditor Plugins - Button Picker - Combo - Adjust Cursor

3. Prepare to Add Icon

Click your cursor inside of the button at the beginning or end of the text you've created.

Click the Icon Picker button.

D7 Text Editor - OSU CKEditor Plugins - Button Picker - Combo - Select Icon Color and Size

4. Add Icon Data

In the OSU Icon Picker dialog box:

Click on a Color options = select a color by clicking on it.

Click on a Size options = select a size by clicking on it.

Select an icon from either the OSU Icons tab or the Font Awesome Icons tab.

Click the OK button.

D7 Text Editor - OSU CKEditor Plugins - Button Picker - Combo - Some Misalignment

5. Completed Button with Icon Embed

There will be some misalignment between the icon and button text. Don't worry about it. This will correct itself when the node is displayed.

D7 Text Editor - OSU CKEditor Plugins - Button Picker - Combo - Select All Text

6. Open Linkit

Select all the text and the icon within the button.

Click the Linkit toolbar button.

D7 Text Editor - OSU CKEditor Plugins - Button Picker - Combo - Set Link

7. Create Link

Create the link by either searching for an existing object inside of the site via the Search For Content field or by adding an external link in the Link URL field.

If desired, click on the Options field set to add additional Title and/or Target attributes.

Click the Insert Link button.

Click the Save button to save the node.

D7 Text Editor - OSU CKEditor Plugins - Button Picker - Combo - Button Created

8. Completed Button and Icon

The completed icon and button text will now appear, nicely aligned.

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.