Change size/color of the Post/Page Icon & Title

Note : the following code snippet requires advanced WordPress developer skills. There's no guarantee that this snippet works as is with the latest version of our themes, and with the latest version of WordPress. That's why you need to always test any code snippets in a staging environment before implementing it in a production site.

Last Reviewed: 3-Apr-15 (3.3.13)3.1.* 3.2.* 3.3.*

Where to copy/paste this code?
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.

(Credit: @rdellconsulting/@Steve Enggass)

Related Snippets you may also like

11 thoughts on “Change size/color of the Post/Page Icon & Title

  • Guillermo

    Hi! Thanks for this great theme!
    My sticky post has a slight different format than the rest: Title centred, and content is ALL bold.
    Is there a way to change this? The code above seems to affect the non-sticky posts only. Can you please point me in the right direction?
    Many thanks!


      • Raimund Hagemann

        Hi Nicolas,
        yeah, I found it.
        And for people as clueless as I was – here’s the code to add to your child’s theme style.css

        /* page ID 26 icon changed */

        .page-id-26 .format-icon:before {
        font-family: ‘entypo’;
        content: ‘\1F30E’ !important; /* change to your preferred icon */
        font-size: 35px; /* changed em to px to get rid of IE bug */
        line-height: 0px;
        position: relative;
        top: 14px;

        …and thanks a lot for this beautiful theme!!

  • Steve Enggass

    Can’t get this snippet to work – has no effect. Working with a child theme locally using MAMP. I would like to change the color of the Post Titles.

    I am using the following to change the Featured Titles:

    /* Change Featured Pages Heading */
    .marketing h2 {
    font-size: 24px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: #e23a3f;

    I am also using the following to remove the ‘pencil icon’ on Posts.

    /* Remove the pencil icon */
    .post h1.format-icon:before, .post h2.format-icon:before {
    content: none;

    Any tips?

        • Steve Enggass

          Also, why is there a bit of extra white space above posts on the front page? I have a column left and right with posts in the center. Each column has a widget that aligns slightly higher than the posts in the center column. How can adjust the top margin, I guess, of the center column posts?

Comments are closed.