Removing the page icon on the left of the page title

by Press Customizr|Published 23 September 2013

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 :

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

AUTHOR

Press Customizr

Hi! Our team is working everyday to help you publish your WordPress content the best possible way. :) Thanks for visiting our website. You can also visit our knowledge base.

357 posts

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

58 comments

Menaka S
28 March 2016, 6 h 43 min

Hi Fabio,
The developer team handles support for Customizr at https://wordpress.org/support/theme/customizr and for Customizr-Pro at http://presscustomizr.com/support/. Please post your query there with a link to your site.
AlHaqTraders
27 March 2016, 21 h 41 min

.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
27 March 2016, 19 h 57 min

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
15 September 2015, 15 h 56 min
Hi, I’m not able to change the icon of the “aside” format post…
I tried:
```
.format-aside .post-format-icon a{
background: url('http://www.dottorblog.com/wp-content/uploads/2015/09/128.png') 
background-size: 50px 50px;
}
```
or
```
article.format-aside .format-icon:before {
  background: url('http://www.dottorblog.com/wp-content/uploads/2015/09/128.png') center center no-repeat;
  background-size: 50px 50px;
}
```
and many others with no results…The image linked is just a placeholder. Help, if you can.
Thanks
Kori D. Miller
18 June 2015, 20 h 50 min

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!
- Nicolas
  21 June 2015, 14 h 54 min
  
  Hi, you might want to look at the guide to customize the Customizr theme.
  If you still don’t find your way, please post a new topic in the support forum.
  
  Bests 🙂
Sydney Jane Baily
23 August 2014, 17 h 02 min
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:
```
/* Replace the Post/Page 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 */
}
```
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:
```
/* Replace the Post/Page Icon with your own image */  
.post h1.format-icon:before, .post h2.format-icon:before {
content: url(/wp-content/uploads/2014/08/irrid_dragon2.gif); /* Adjust the path/image name */
}
```
And with a longer url, like this:
```
/* Replace the Post/Page Icon with your own image */  
.post h1.format-icon:before, .post h2.format-icon:before {
content: url(http://timeforchi.com//wp-content/uploads/2014/08/irrid_dragon2.gif); /* Adjust the path/image name */
}
```
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
  23 August 2014, 17 h 04 min
  
  I meant to say I used “a gif that I just uploaded”, not “highlighted.” Must need coffee. And spelled highlighted wrong. Argh!!
- Nicolas
  24 August 2014, 9 h 34 min
  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 :
  
  article.page .format-icon:before { background: url('http://timeforchi.com/wp-content/uploads/2014/08/irrid_dragon2.gif') center center no-repeat; background-size: 50px 50px; }
  
  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
    25 August 2014, 1 h 59 min
    
    Thanks, Nicolas. You’re right, it was deleted by the custom css box. Thanks again. Great theme!!
Sally
28 July 2014, 7 h 01 min

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
11 July 2014, 16 h 30 min

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
8 July 2014, 13 h 23 min

Correction: The code removed the icons but not the page titles.
Thomas
7 July 2014, 20 h 52 min

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
  8 July 2014, 7 h 50 min
  
  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
    8 July 2014, 13 h 02 min
    
    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
    8 July 2014, 17 h 34 min
    
    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
29 June 2014, 16 h 30 min
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.
```
.page h1.format-icon:before {
content: none;
}
```
Anyone have any ideas on why this is and how to fix it? Thank you!
- Nicolas
  1 July 2014, 8 h 57 min
  Hi Nell,
  Try to add the !important tag at the end of your CSS property value :
  
  .page h1.format-icon:before { content: none!important; }
  - Sue
    3 July 2014, 6 h 16 min
    
    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
      3 July 2014, 10 h 34 min
      
      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
16 June 2014, 21 h 44 min

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?
Ксения
13 May 2014, 15 h 09 min

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
31 March 2014, 1 h 06 min

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
9 March 2014, 23 h 39 min

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?
- Nicolas
  10 March 2014, 9 h 24 min
  
  Thanks for sharing @Bo!
  Best
- Keval
  7 April 2014, 13 h 31 min
  
  Thanx Bo this Code worked.
- Pam Israelson
  14 May 2014, 18 h 41 min
  
  Yes! This works. Thanks Bo!
- Istvan
  13 August 2014, 17 h 25 min
  
  Thanks a lot, the first one didn’t work, but the second one did! Awesome!
michele
18 December 2013, 22 h 53 min

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
- Steve Enggass
  29 January 2014, 22 h 25 min
  
  How do i remove the Search Magnifying Glass Icon? Like on this page…
  Thanks.
  - Danie
    24 February 2015, 10 h 42 min
    
    I added this to my custom css:
    
    .form-search:before, .widget_product_search form:before {
    content: none;
    }
Alison
16 December 2013, 22 h 40 min

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.
- Nicolas
  17 December 2013, 9 h 22 min
  
  Hi @alison, which version of the theme do you use?
  thanks
  - Alison
    17 December 2013, 18 h 16 min
    
    I’m using version 3.1.5. Is this the latest release? Anyway, I just deleted the icons because I primarily use Firefox. I didn’t mind them though.
Ben Roberts
2 December 2013, 20 h 28 min

Our site is replacing the custom font for glyphs in firefox, leaving them blank in IE and they work fine in chrome.

Any idea why?

Thanks in anticipation,

BR

http://www.ramsburypreschool.org.uk/
- Nicolas
  3 December 2013, 9 h 43 min
  
  Hi Ben, on firefox you have this error : NetworkError: 404 Not Found – http://ramsburypreschoolorg.ipage.com/wp-content/themes/customizr/inc/css/fonts/genericons-regular-webfont.eot”
  It means that for some reasons the icon font is not found and can’t be displayed then.
  I would recommend to re-install the theme.
  Hope this helps.
Seamus Berkeley
1 December 2013, 20 h 05 min

@Laur Your code worked perfectly, thanks!
Christian
12 October 2013, 18 h 02 min

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
  14 November 2013, 15 h 14 min
  
  Hey,
  im stuck in a same situation, hope there is a easy solution.
- Laur
  14 November 2013, 15 h 22 min
  Found a code that fixed the error for me.
  cheers
  
  .format-icon:before { display: none; } .entry-summary.format-icon:before, .entry-content.format-icon:before, article.page .format-icon:before, article.format-standard .format-icon:before, article.format-gallery .format-icon:before, article.format-aside .format-icon:before, article.format-chat .format-icon:before, article.format-audio .format-icon:before, article.format-video .format-icon:before, article.format-status .format-icon:before, article.format-quote .format-icon:before, article.error-404 .format-icon:before, article.format-image .format-icon:before, article.format-link .format-icon:before { display: none; }
  - Antonio
    30 September 2014, 20 h 55 min
    
    this did it for me thank you so much
Tibor Galamb
4 October 2013, 12 h 47 min

Hi guys,

How can you hide the title and icon as well?

Thanks
brandon Ernst
28 September 2013, 23 h 41 min

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
26 September 2013, 12 h 42 min
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
```
#main-wrapper .format-icon:before {content: none;}
```
- Nadine Sabulsky
  18 December 2013, 8 h 29 min
  
  Thank you! Exactly what I was looking for!
- Andrea
  20 February 2014, 22 h 34 min
  
  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
  13 June 2014, 10 h 15 min
  
  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
26 September 2013, 12 h 07 min
Thanks Nicolas,

but that didn’t work. Though I found the following and that did the trick!
```
.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';
}
```
Thanks again for the great theme!
Andrei Gheorghiu
24 September 2013, 8 h 58 min
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:
```
.page h1.format-icon:before {
content: none;
}
```
- Nicolas
  24 September 2013, 9 h 13 min
  
  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
  - Ishita
    25 September 2013, 8 h 05 min
    
    What is the code again to remove the icon? would you please paste it here to be added in the custom CSS
    - Nicolas
      25 September 2013, 14 h 39 min
      
      Hi Ishita,
      This is the one in the post above.
  - Marian
    17 June 2014, 10 h 46 min
    
    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
      17 June 2014, 11 h 10 min
      
      Try adding this to your custom css or your child-theme style.css:
      
      .entry-title:before, .widget-title:before { content: none !important; }
      - Marian
        17 June 2014, 13 h 20 min
        
        Dear Rocco,
        
        Yes, that did the trick! Fantastic!! Thank you so much!! Best wishes, Marian
      - Marian Martin
        6 July 2014, 20 h 32 min
        
        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
        28 August 2014, 11 h 01 min
        
        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.