Add New Icons to OceanWP Theme Icons List

This is a Developer Level doc.

If you're unfamiliar with PHP and/or editing files, codes and templates, as well as with resolving possible conflict, please seek help from a professional. Under our Support Policy, we don't provide support for modifications and customization.

Before an icon can be used in custom theme codes, first it needs to be added to the theme icons list.

You can declare your own icons and add them to the theme icons list in the following way:

// Add new icons to OceanWP theme icons array.
function add_new_icons( $icons) {
	$icons['whatsapp']= array(
                'sili' => 'fab fa-whatsapp',
                'fai'  => 'fab fa-whatsapp',
                'svg'  => 'fab fa-whatsapp',
            ); // For adding multiple icons copy this entire area and apply changes accordingly to the icon name and values.

	return $icons;
}
add_filter( 'oceanwp_theme_icons', 'add_new_icons' );

In this example we have declared all icons as Font Awesome icons, but here is the correct use of the parameters:

$icons['ICON_NAME']: replace icon_name with the name of your icon you will use in conjunction with the oceanwp_icon() function.
sili: parameter used when Simple Line Icons are selected as theme icons.
fai: parameter used when Font Awesome icons are selected as theme icons.
svg: parameter used when Ocean SVG Icons are selected as theme icons.

You can only change the values for these parameters. All values must be declared, even if you do not plan to use them.

As shown in the example, you can use a Font Awesome icon class to declare an icon value even if Simple Line Icons are being used and vice versa:

For SVG icons, use available OceanWP SVG options.

You can find the list of all available OceanWP SVG Icons here. All icons on the list also exist in the OceanWP Theme Icons array with their Font Awesome or Simple Line Icons counterparts declared.

All PHP snippets should be added via a child theme's functions.php file.