Inserting Icons

Within OU Campus, you have the option to insert icons from the Gadgets Sidebar. These are perfect for drawing attention to actions you would like visitors to take while on your site, or for directing them to important, large chunks of information. 

Material Icons

The icons available through the Icons Gadget are forked from Google's Material Design. To browse available icons, and search using keywords, visit the Icon example page. Once you have found an appropriate icon, note its name. You can insert small, medium, and large icons in either UNC Blue (default), UNC Gold, or white. Please keep in mind that the icons should be visually appealing when used on a background color.

facefaceface

facefaceface

facefaceface

Enabling the Icons Gadget

The Icons Gadget is only available while on a page in Edit mode. If the Icons Gadget is not visible while editing, you may need to enable the gadget.

  1. From the Edit view in OU Campus, select the Show Gadgets icon in the top right corner of the screen to expand the Gadgets sidebar.
    Gadgets icon and toolbar
  2. To enable the Icons Gadget, select the Choose Gadgets gear icon and ensure box next to Icons is checked. This should change the Gadget to green in the list as it has been enabled. Click Save when done.Choose gadgets screenshot

Using Icons

Use icons to support your content, not replace it--they should add value to your site. Icons are generally used to catch the interest of your visitors. Additionally, the use of icons should not replace the navigation for your site, but rather assist visitors by directing them to content they may find important.

It is essential to choose an appropriate icon before inserting. When visitors become accustomed to existing icons used throughout the web or on UNC's website, altering the action of an icon becomes confusing. If the icon doesn't make sense to you, or you can't find an appropriate icon to insert, leave it out. When used effectively, icons eliminate the need for your visitors to overthink the action they are about to take.

  1. In the Edit view, select a Content Region to edit.
  2. Place your cursor in the location you wish to add the icon and click as if you were to begin typing.
    Place cursor to location
  3. With the Icons Gadget open, select the icon you wish to insert, select a size, and choose a color for the icon that is appropriate for use. A preview of the icon, without size and color applied, will appear next to its name.
  4. Click Insert Icon.
    Choose settings

    An icon placeholder will appear while in Edit mode.
    Icon placeholder

    Upon a Save and Exit or Publish of the page, the placeholder will be replaced with the selected icon. Here is an example using icons in the Four Columns snippet. The icons have the Center Text style applied to appear aligned with the remaining content.
    Final inserted icons

To delete an icon, delete it as you would any other image. It is not possible to replace icons. Please delete the inserted icon and reinsert the desired icon.