Removing the page icon on the left of the page title


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


If you find this icon ugly or you just don’t want to see it, copy and paste the following code in the custom CSS section of the customizer options :

 


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



58 thoughts on “Removing the page icon on the left of the page title

  • AlHaqTraders

    .format-icon:before {

    speak: none;

    text-transform: none;

    -webkit-font-smoothing: antialiased;

    padding-right: 10px;

    opacity: 0.2;

    position: relative;

    top: 8px;

    display: none;

    font: normal normal 1.2em/1 ‘entypo’;

    }

  • AlHaqTraders

    Hellow, I am using Customizr – Version: 3.1.24 -By nikeo on my website http://www.alhaqtraders.com and i and confused on the following things to get them as per i like.

    1. Little icon at page and post.

    2. Drop down menu (VIA Custom URL) is down and very little right .i want to to go fully right or at least half of its length.

    Do i use the above code you mentioned or something else. Kindly guide.

  • Fabio Muriana

    Hi, I’m not able to change the icon of the “aside” format post…
    I tried:

    or

    and many others with no results…The image linked is just a placeholder. Help, if you can.
    Thanks

  • Kori D. Miller

    After reading through this entire string, I’m a bit confused. What code do I use to get rid of the titles on my pages (that appear next to the icon?) I used Ishita’s code to get rid of the icon. I don’t want to lose the titles for my posts.
    Thanks!

  • Sydney Jane Baily

    Hi, I am nearly finished customizing the site at http://www.timeforchi.com, and decided to put in a custom icon. I saw this code:

    I put it directly in the custom css section of the customizer where I have put other code with great success. However, when I changed the url to a gif that I’d just hightlighted, it didn’t work. Can you help me?

    I tried it like this:

    And with a longer url, like this:

    I’m going to try with a jpg now in case it being a gif is the problem, but can you take a look and tell me if I’m doing something wrong.
    Thanks very much.

    • Sydney Jane Baily

      I meant to say I used “a gif that I just uploaded”, not “highlighted.” Must need coffee. And spelled highlighted wrong. Argh!!

    • Nicolas Post author

      Hi Sydney,
      You seem to have forgotten the single quote wrapper for the content url. (or it might have been deleted?)
      You an use the before::content pseudo class property, but I would rather recommend to use the background property as follow :

      I would also recommend to paste this css code into the style.css file of your theme (or child theme).
      If you paste it into the custom css field of the customizer, the single quote might be escaped (meaning automatically removed for security reasons), you’ll then have to double them.

      More about the content before specification : https://developer.mozilla.org/en-US/docs/Web/CSS/content

      Cheers

      • Sydney Jane Baily

        Thanks, Nicolas. You’re right, it was deleted by the custom css box. Thanks again. Great theme!!

  • Sally

    Didn’t work on http://therapist-rick-bush.co.uk/biography/ actually made it much worse now seeing square box too! Why have you designed a theme which does not allow the most fundamental of web functionality – the outward going html link!? Does not make sense to me. In the footer I try to put a link to the other site – ah – but no! returns 404 error

  • Cathy

    Hello:

    I put the code suggested by Nicolas on July 8 in my Custom CSS and it worked perfectly to remove the icon at the beginning of a page title. However, I would also like to remove the word ‘Edit’ after the title. I don’t want people coming to my website thinking they can edit a page there.

    Thanks for the help.

    Cathy

  • Thomas

    Trying to get rid of the page/post icons. I want to be clear about where I am to place the above suggested CSS code. In the child theme: style.css:

    /*
    Theme Name: Customizr Child
    Theme URI: http://presscustomizr.com/customizr
    Description: A child theme for the Customizr WordPress theme. This child theme simply includes 2 files : style.css to add your custom css and functions.php where you can extend Customizr’s core code. In order to keep your code as clean and flexible as possible, try to use Customizr’s hooks API for your customizations. Do something awesome and have fun !
    Author: Nicolas Guillaume (nikeo)
    Author URI: http://presscustomizr.com
    Template: customizr
    Version: 1.0.0
    */

    /* Your awesome customizations start right here !
    ————————————————————– */
    .page h1.format-icon:before {
    content: none!important;
    }

    Is this correct? I added it exactly as shown above and it didn’t work. Please help.

    • Nicolas Post author

      Hi Thomas, this is correct and will work for your pages.
      Looking at your site, I don’t see this code in your child theme stylesheet yet.
      Best and hope this help!

      • Thomas

        Nicolas,

        Thank you for your quick reply. I reentered the code above in my child theme: style.css and it still doesn’t work when using Safari. I haven’t tested in other browsers yet. Please look in my child theme stylesheet and see if you can determine my problem. Thanks again for your help.

      • Thomas

        Nicolas,

        Sorry to keep writing about the same topic, but I want to let you know I successfully removed the page titles by using the following:

        .page .entry-title {
        display: none;
        }

        Thanks again for your help.

  • Nell

    I added the code below and the icons no longer appear when the website is viewed in Firefox, however the icons still appear when the website is viewed in Chrome and Safari.

    Anyone have any ideas on why this is and how to fix it? Thank you!

    • Nicolas Post author

      Hi Nell,
      Try to add the !important tag at the end of your CSS property value :

      • Sue

        Hi Nicolas – love the theme! I too have had problems removing the page/post icons. I have a child theme CSS file where I tried all the suggested solutions, including the latest you posted – none worked. On a hunch I typed in your latest suggestion in the Custom Code block of the Cutomizr panel and it worked! But I am stumped – any idea why it’ not working when implemented in a child theme?

        • Nicolas Post author

          Hi Sue, pretty weird that it did not work when pasted in your style.css file of child theme.
          I can’t really say why!
          Best and enjoy the theme 🙂

  • Cassie

    I have the same problem as Jose Lopez- this code doesn’t work in the newest version of Customizr. I’ve tried every piece of code I can find online and the icons are still there.

    Can anyone help?

  • Ксения

    Hello And in what specific files need this code to register, that header with an icon on the page go? File name can tell?

  • Jose Lopez

    It doesn’t appear that the codes above are working any longer in the new version Customizr 3.1.9 version to remove the icon to the left of the left sidebar menu. This is the code that I was using and was working fine in my child theme. Any help would be appreciated:

    .format-icon:before {
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    padding-right: 10px;
    opacity: 0.2;
    position: relative;
    top: 8px;
    display: none;
    font: normal normal 1.2em/1 ‘entypo’;}

  • Bo

    Number one thanks for the great theme!!!

    This didn’t work:

    .page h1.format-icon:before {
    content: none;
    }

    This worked:

    #main-wrapper .format-icon:before {content: none;}

    Thank you Andrei.

    PS: What If I wanted to add a small logo in the page icon’s place? Would someone kindly post the CSS code for that?

  • michele

    None of these are removing those icons as directed. Can someone paste the working code that goes in the custom css to remove those icons?

    Thanks

  • Alison

    FYI: The header icons only appear as outlined boxes in Firefox. I reloaded the theme and still no icons appear in that browser. Other than removing the icons, are there any other suggestions? Thx.

  • Christian

    Hello everyone,
    one additional question from my side:
    The Hint to remove the icon is great, but one little thing is still open, the icons will appear, when i open my Page with a Mobile-Device (Such as my Samsung Smartphone), how can i remove the Page Icons from the responsive-format.
    Another option can be, to make them smaller…
    Sorry for my bat english, but i’m not realy experienced to write…

    • Laur

      Found a code that fixed the error for me.
      cheers

  • brandon Ernst

    Hey guys this worked great!
    Question:
    Do you know how I could add an image in place of the icon or title without using a slider?

    Thanks!

  • Andrei Gheorghiu

    Ishita, the code above only hides the icons for static pages. Not for archives, search results, author archives, etc… If you want to hide the title icons sitewide, use

    • Andrea

      I’ve managed to remove most of the icons. However, I still have icons on my sidebars. Anyway to get rid of those?

      I did try the following code in my childtheme:
      /* Remove all icons */
      #main-wrapper .format-icon:before {content: none;}

      However, it didn’t remove the sidebar icons. Any help? 🙂

    • Marian

      Hi, I am looking for a code which deletes ALL icons in the whole customizr theme (also sidebars, archives, footer, everything). I tried the next code, but is isn´t working for the sidebars and footers.

      #main-wrapper .format-icon:before {content: none;}

      Can anybody help me, please?

  • Ishita

    Thanks Nicolas,

    but that didn’t work. Though I found the following and that did the trick!

    Thanks again for the great theme!

  • Andrei Gheorghiu

    From my understanding of CSS, the declaration above hides the entire title, not just the icon. In order to remove the icon one would have to set the .page h1.format-icon:before content to none:

    • Nicolas Post author

      Ooops yes you are right Andrei…I wrote it too fast, my code will just hide the page title…!
      I am fixing the snippet right now.
      Thanks

      PS : trick for styling your code in comments : just encapsulate it with the pre tags

      • Marian

        Hi, I am looking for a code which deletes ALL icons in the whole customizr theme (also sidebars, archives, footer, everything). I tried the next code, but is isn´t working for the sidebars and footers.

        #main-wrapper .format-icon:before {content: none;}

        Nicolas, can you help me or anybody else, please?

        Thank you!

        • Rocco Aliberti

          Try adding this to your custom css or your child-theme style.css:

          • Marian Martin

            Dear Rocco,

            Could you please help me one more time?

            I do not only want any icons, I also do not want the text “Category Archives”. I only want the title of the category to show. Would that be possible? Can you or anybody else help me out? I have no CSS experience whatsoever.

            Thank you very much

            • Onno Ruiter

              Hi Marian,

              I’m curious what the answer was on you question about removing the text “Category Archives”. Like to share?

              Cheers

Comments are closed.