Change Post/Page Icon & Title

Last Reviewed: 28-Aug-15 (3.4.8) 3.1-3.4.*

Where to copy/paste this code?

NoteSince Customizr 3.3.1 (Customizr-Pro 1.0.12), because of new wp themes guidelines, you cannot use single (double) quotes in the Custom CSS in customizer. Use a Child Theme.

The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then We strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

Remove the Post Icon:

/* START OF Change Post/Page Icon & Title */
/* Remove Post Icon 3.3 */
article .format-icon:before {
content:    none !important;
}

/* Remove Page/Post Icon 3.1/3.2 */
[.page or .post ] #main-wrapper h1.format-icon:before {
content:    none;
}
/* END OF Change Post/Page Icon & Title */

 

Remove the Page/Post Icon/Title:

/* START OF Change Post/Page Icon & Title */

/* Remove Page/Post Icon/Title/Comment Bubble */
[.page or .post ] .entry-title.format-icon {
display:    none;
}
/* END OF Change Post/Page Icon & Title */

 

Center the Page/Post Title:

/* START OF Change Post/Page Icon & Title */

/* Remove Post Icon 3.3 */
article .format-icon:before {
content:    none !important;
}

/* Center Page Title 3.3  */
[.page or .post ] h2.entry-title.format-icon  {
text-align:     center; 
}

/* Remove Page/Post Icon 3.1/3.2  */
[.page or .post ] #main-wrapper h1.format-icon:before {
content:        none;
}

/* Center Page/Post Title 3.1/3.2  */
[.page or .post ] h1.entry-title {
text-align:     center;
}
/* END OF Change Post/Page Icon & Title */

 

Remove the Pencil icon on Posts:

/* START OF Change Post/Page Icon & Title */

/* Remove the pencil icon  */
.post h1.format-icon:before, .post h2.format-icon:before {
content: none;
}
/* END OF Change Post/Page Icon & Title */

 Credit: @tomaja. Fix identified by @Michael

 

Replace the Page/Post Icon with your own image:

/* START OF Change Post/Page Icon & Title */

/* Replace the Page/Post Icon with your own image */  
.post h1.format-icon:before, .post h2.format-icon:before {
content: url(/wp-content/uploads/2014/02/feather.jpg); /* Adjust the path/image name */
}
/* END OF Change Post/Page Icon & Title */

  Credit: @Michael

 

Use different Icons on different Pages:

Important
The icons are based on the Entypo font. Refer to this Entypo Link to see the full range of icons available.
Then choose the desired icons, ignoring the ‘U+’
Use F12 to bring up the Code Inspector. View the source code for every Page to be changed, and note down the page-id-n in the head code.
Add the following code using the page-id-n’s from the previous step.

Where to copy/paste this code?

NoteSince Customizr 3.3.1 (Customizr-Pro 1.0.12), because of new wp themes guidelines, you cannot use single (double) quotes in the Custom CSS in customizer. Use a Child Theme.

The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then We strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

/* START OF Change Post/Page Icon & Title */
/* Default setting */
article.page .format-icon:before {
    content: "\1F4C4"
    font-size: 3em;
    line-height: 0;
    position: relative;
    top: 14px;
}
.format-icon:before {
    font-family: 'entypo';
    font-size: 1.2em;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    opacity: 0.2;
    padding-right: 10px;
    position: relative;
    text-transform: none;
    top: 8px;
}
/* Change page-id-n and the Entypo code in below examples */
.page-id-150 article.page .format-icon:before {
    content: "\E722";
}
.page-id-64 article.page .format-icon:before {
    content: "\1F4F7";
}
.page-id-105 article.page .format-icon:before {
    content: "\1F4C5";
}
/* END OF Change Post/Page Icon & Title */

  Credit: Inspired & Tested by @cesar

82 thoughts on “Change Post/Page Icon & Title”

Comments are closed.