Replace Dashicons with IonIcons in Genesis Sample

This tutorial provides the steps to replace the Dashicons with Ionicons in new Genesis Sample theme.

STEP 1

The first step is to remove Dashicons and Activate IonIcons. Open functions.php and delete/comment out the line

wp_enqueue_style('dashicons');

and add/replace with the above line, this to enqueue Ionicons

wp_enqueue_style(
    'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css',
    array(),
    CHILD_THEME_VERSION
);

Want to Host Font icons Locally? Follow the tutorial Host Ionicons Locally in WordPress.

Learn more about Ionicons in Genesis.

STEP 2

This step is to replace the HTML and give the Ionicons class name and CSS content value.

TYPE 1

By Overwriting.

Option 1

The simplest way is to overwrite the default CSS content value and font family. We will leave the default dashicon HTML. We will just change the content value and font family in :before element.

Add the following CSS at the end of style.css of your child theme.

/* Ionicons Menu
-------------------------------- */
.menu-toggle::before {
    top: 0.4px !important;
    font-size: 1em;
    line-height: 1.1;
    margin-right: 2px !important;
    padding-top: 0;
    text-rendering: auto;
    font-family: Ionicons;
    font-weight: normal;
}

.site-header .menu-toggle::before {
    float: left;
    margin-right: 5px;
    position: relative;
    text-rendering: auto;
}

.dashicons-menu:before {
    content: "\f20d";
    font-size: 1em;
}

.menu-toggle.activated::before {
    content: '\f129';
    font-size: 1em;
}

.dashicons-arrow-down-alt2:before {
    content: "\f123";
    font-size: 1em;
}

.dashicons,
.dashicons-before:before {
    display: inline-block;
    font-family: Ionicons;
    text-decoration: inherit;
    font-weight: 400;
    font-style: normal;
    vertical-align: top;
    text-align: center;
    transition: color .1s ease-in 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.menu-toggle {
    /* line-height: 22px; */
    padding: 15px 0;
    margin-bottom: 0;
}

.dashicons-menu:before {
    content: "\f394";
    font-size: 1.3em;
}

.menu-toggle.activated::before {
    content: '\f2d7';
    font-size: 1.2em;
    /* margin-right: 0 !important; */
}

.dashicons-arrow-down-alt2:before {
    content: "\f123";
    font-size: 1.2em;
}

.entry-categories::before,
.entry-tags::before {
    display: inline-block;
    font: normal 16px/1 'ionicons';
    margin-right: 8px;
    margin-top: -5px;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
}

.entry-categories::before {
    content: "\f3ca";
}

.entry-tags::before {
    content: "\f48f";
}

.entry-categories,
.entry-tags {
    display: block;
}

 

TYPE 2

By Modification.

Option 2

STEP 1

Open functions.php and replace this

/**
 * Defines responsive menu settings.
 *
 * @since 2.3.0
 */
function genesis_sample_responsive_menu_settings() {

	$settings = array(
		'mainMenu'         => __( 'Menu', 'genesis-sample' ),
		'menuIconClass'    => 'dashicons-before dashicons-menu',
		'subMenu'          => __( 'Submenu', 'genesis-sample' ),
		'subMenuIconClass' => 'dashicons-before dashicons-arrow-down-alt2',
		'menuClasses'      => array(
			'combine' => array(
				'.nav-primary',
			),
			'others'  => array(),
		),
	);

	return $settings;

}

to

/**
 * Defines responsive menu settings.
 *
 * @since 2.3.0
 */
function genesis_sample_responsive_menu_settings() {

	$settings = array(
		'mainMenu'         => __( 'Menu', 'genesis-sample' ),
		'menuIconClass'    => 'ionicons-before ion-android-menu ionicons-menu',
		'subMenu'          => __( 'Submenu', 'genesis-sample' ),
		'subMenuIconClass' => 'ionicons-before ion-chevron-down',
		'menuClasses'      => array(
			'combine' => array(
				'.nav-primary',
			),
			'others'  => array(),
		),
	);

	return $settings;

}

STEP 2

Add the following CSS at the end of style.css of your child theme.

/* Ionicons Menu by Designody.com
-------------------------------- */

.ionicons, .ionicons-before:before {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    display: inline-block;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*v1*/
.ionicons-menu:before {
    content: "\f20d";
    font-size: 1.2em;
}
.menu-toggle.activated::before {
    content: '\f129';
    font-size: 1em;
    line-height: 1.2;
}

/*v2*/
.ionicons-menu:before {
    content: "\f394";
    font-size: 1.2em;
}
.menu-toggle.activated::before {
    content: '\f2d7';
    font-size: 1em;
    line-height: 1.2;
}



.entry-categories::before,
.entry-tags::before {
    display: inline-block;
    font: normal 16px/1 'ionicons';
    margin-right: 8px;
    margin-top: -5px;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
}

.entry-categories::before {
    content: "\f3ca";
}

.entry-tags::before {
    content: "\f48f";
}

.entry-categories,
.entry-tags {
    display: block;
}

 

Cheatsheet: https://ionicons.com/v2/cheatsheet.html