Icons Manager

Since version 1.7.8 BasePress has an advanced Icon Manager that allows you to easily change an icons in your WordPress knowledge base. You can present your content with any icon font of your choice.
The Icon Manager is accessible from the WordPress admin panel navigate to BasePress >Icons Manager. Once inside the Icons Manager page you’ll see a tool area and a list of the currently active icons, shown below:

By default BasePress uses the icons font that comes with the plugin. This includes 675 unique icons which should cover the requirements 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 icon font#

There are four fields to start using new icons:

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

We’ll explain how to use these fields 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 these 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 in your knowledge base and decided to use the CDN link to speed up font loading.
Ionicons don’t use any extra classes to style the icon element and we want BasePress to load the icons as they aren’t 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 you’ve set the icons fields you can click Load Icons too make the Icon 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 an icon for each one from the list in their editor page. BasePress comes with over 600 icons and other icon fonts may even have 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. BasePress uses default icons when you don’t choose an icon for a specific article or section.
Use the drop down menu to select which icons you want to edit. “Articles Icons” is selected by default.

You can select the icons 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 vice versa.
  You can only select one default icon 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 to the beginning of the list, keeping the order in which they were selected.
• You can drag 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 Icon 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:

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/";
}

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.