• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Replace Dashicons with IonIcons in Genesis Sample

Last Updated on March 20, 2019 Favorited: 0 times

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

Related Posts

  • Hosting Font Icons Locally in WordPress for Genesis
  • Ionicons in Genesis
  • Using FontAwesome in Genesis

Categories: Free Content, Genesis Tutorials, WordPress Tutorials Tags: font, fonticon, ionicons

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service