Icons Manager

Since version 1.7.8 BasePress includes an advanced Icons Manager to allow you to easily change the icons in your knowledge base and present your content with any icon font of your choice.
The Icon Manager is accessible from BasePress menu. Once inside the Icons Manager page you will be presented with a tool area and the list of currently active icons.

basepress-icons-manager

BasePress Icons Manager Page

By default BasePress will use the icons font that comes with the plugin. This includes 675 unique icons which should cover the necessity of most projects.
The top gray part in the tools area allows you to load a different icons font. You can skip this part if you want to use the default icons.

Use a different icons font

There are four fields to start using new icons:

  • Css Uri
  • Extra Classes
  • Load Icons
  • Don’t load icons on front end

Understanding the use of these fields should be easiest with some examples. The icon fonts in the examples are just a few of the ones you can find online and use with BasePress:

Use Font Awesome which is already present in your main theme

You already have Font Awesome used in your site and the icons css are located here: wp-content/themes/your-theme-name/css/font-awesome.css.
Font Awesome uses an extra class to style the icon elements called ‘fa’.
We also don’t want BasePress to load the icons as they are already loaded by the main theme.
You can use this settings:

  • Css Uri: css/font-awesome.css
  • Extra Classes: fa
  • Don’t load icons font on front end: enabled

Use Line Awesome which is already present in your main theme but not used by the rest of the site

Line Awesome uses an extra class to style the icon elements called ‘la’.
Use this settings:

  • Css Uri: css/line-awesome.css
  • Extra Classes: la
  • Don’t load icons font on front end: Disabled

Use Ionicons from a CDN

You want to use Ionicons icons on your knowledge base and decided to use the CDN link to speed up font loading.
Ionicons doesn’t use any extra classes to style the icons element and we want BasePress to load the icons as they are not used anywhere else in your site.
Use this settings:

  • Css Uri: http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css
  • Extra Classes: Leave empty
  • Don’t load icons font on front end: Disabled

Once the icons fields have been set you can click Load Icons too make the Icons Manager load the files and start using them. The icons will appear in the editor.

Choose which icons to use in the Knowledge base

When you create an article or a section you can choose the icon for them from a list in their editor page. BasePress comes with over 600 icons and other icon fonts may have even more.
To start using the icons in your knowledge base you need to select the ones you want to effectively use from the list and specify the default icon for the Articles and sections. Default icons are used when no other icon has been chosen for a specific article or section.
Use the drop down menu to select the context of the icons you want to edit. “Articles Icons” is selected by default.
The icons can be selected as follow:

  • Clicking any icon to select or deselect it.
  • To select/deselect a range of icons click the first icon in the range then ‘SHIFT’ + click the last icon in the range.
  • ‘ALT’ + click an icon to make it default or viceversa.
    Only one default icon can be selected for articles and sections. If you want to change the default icon, first deselect the one already set if present then select the new one.
  • Click Sort Icons to move all selected icons at the beginning of the list keeping the order in which they were selected.
  • You can drug and drop single icons to change their order.
    Articles and sections icons are used in the respective content editors. The order you choose in the Icons Manager will be used in the editors. This allows you to arrange the icons in any way you find it most comfortable to work with. All other icons (Pagination, Breadcrumbs,Votes, Post Meta) should be ordered in the order of appearance in the site.
  • Click Restore Saved Icons to load your last saved settings. If you made any change in the editor without saving, the changes will be lost.
  • Click Restore Default Icons to go back to the original icons settings of the plugin. Your last saved options will be lost.
  • Click Save Icons to save your options.

Why new icons are not loading in the manager?

When using a new icon font you might discover that the icons don’t load correctly or not at all.

BasePress uses a regex pattern to extract the icon classes from the css file. This works for most of the common icon fonts.

"/\.([\w-]+):before\s*{\s*content:.*?\s*}/"

If you clicked on “Load Icons” and nothing appear the default regex that BasePress uses didn’t work to extract the classes from the font css file. You will see the editor with no icons like this:

icons-manager-page-regex-issue

BasePress default regex failed to extract the icons classes

In that case you can use your own regex pattern to extract the icon classes. To do so add the following hook to your functions.php:

add_filter( 'basepress_icons_manager_regex', 'custom_icons_regex' );

function custom_icons_regex(){
    return "/your regex pattern/";
}
icons-manager-page-missing-classes

Icons don’t appear because the Extra Classes in the form are missing

If instead the icon list appears but the icons are not showing inside the boxes make sure that you have added the right extra classes in the form and reload them.

It is recommend to choose which icons to use in the knowledge base before creating your content. Changing font later would mean that any article or section which used an old icon would appear without icon in the front end.

Was this helpful?

Previous Article

Content Restriction

Next Article

Insights