Change camera icon in posts

Would another Genericon work instead? Please have a look here and let me know if an existing Genericon would do the trick:

https://genericons.com/

If a different Genericon won’t do the trick, could you please provide a link to your site as well as to the custom image you want to use. Thanks.

I would like to change that icon too – how can I replace it with one of the genericons? Thanks!

aprileriel – to change the camera icon at the top of single image post format posts you would add this to your custom CSS or child theme:

.single-format-image .entry-inner::before {
  content: "\f468";
}

The above code would be for the flag Genericon, but you can replace it with whatever Genericon code you prefer.

If you need further help, could you provide a link to an example post on your site whose icon you want to change so I can have a look?

Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS. You could also install a standalone custom CSS plugin if you prefer.

Thanks Kathryn!

I’m still doing something wrong.. I tried both the Custom CSS module in Jetpack, and when that didn’t work I installed the Custom CSS plug-in. I’m just pasting your text in there.

https://birdieandthebeast.org/ (the silly posts are just placeholders)

I don’t see any image post format posts on your site (the ones with a camera icon), which is what this thread was about. You can see why it’s often best to start your own thread, even when a question seems to be similar to that of the original poster. ??

Coud you please be more specific about exactly which icon you want to change, and where?

For example, are you trying to change the little “page” icon on standard post format posts on the homepage, like this one? https://cloudup.com/cWUBLuV_GVc

Yes that’s it. I changed the post format from ‘image’ to ‘standard’ to get rid of the camera.

I just used the CSS editor to change the color of the text boxes, which worked and also changed the color of the circles, so I guess I’m using the CSS editor correctly, but these stubborn little circles seem to be immune to changes! They’re okay as is, but I would love to be able to change both the color of the circle and the icon within it.

This is what I have in the CSS editor now:

.single-format-image .entry-inner::before {
	content: "f461";
}

.posts .entry-inner, .too-short .link-more, .too-short .entry-inner-content:before, .too-short .link-more:before, .posts .entry-inner:after {
	background: #aaf00e;
}

.posts .entry-inner-content {
	border-bottom: #aaf00e;
}

I used my browser inspector to find the element to target on your posts page.

This should change the colour of the icon and background of the post format circles:

.posts .entry-inner::before {
  color: #bb00bb;
  background-color: #000000;
  border-radius: 50%;
}

Change the purple and black to your preferred colours.

I noticed you have custom CSS in a few different places, some is in your child theme while other CSS is in a custom editor. I recommend keeping all your custom CSS in one place, your child theme’s stylesheet. It will simplify your life and make it much easier to troubleshoot in the future. ??

Thanks so much Kathryn. That solved the problem. I got rid of one set of custom CCS (whoops!), then I just changed the color and background color to the same color, so the icon doesn’t show.

Ah, I didn’t realize you were trying to hide the icon, I misunderstood this: “I would love to be able to change both the color of the circle and the icon within it.”

If you prefer, you could completely hide the icon with this:

.blog .posts .entry-inner::before, .archive .posts .entry-inner::before, .search .posts .entry-inner::before {
  content: none;
}

That did it! I wasn’t originally trying to hide the icon – I wanted to change the camera icon to something else, and was just accepting changing it to the text icon and then hiding it by making it the same color instead.

But I used that line, but changed “none” to the icon I wanted to use, and voilá, the icon is changed to a heart.

.blog .posts .entry-inner::before, .archive .posts .entry-inner::before, .search .posts .entry-inner::before {
	content: "\f461";
}

Thanks so much!

Yay! That looks cute. Glad you’re all set!

Thanks for the code for removing the icon! Further to what aprileriel was saying about altering the text boxes can you suggest any CSS code that would

a) determine whether the text is to the left or right of the featured image
b) how much preview text is displayed
c) the font size for the post’s name
d) the colour, size and transparency of the border around the post tiles

I know that’s asking a lot but even if I get a solution for one it’s a start!

My site is beeresistible.com by the way

thanks Michael. I’m getting somewhere with the CSS. I’ve managed to change the border with

/* Hover Color */
.posts .cover-link:hover {
border-color: #DCDCDC;
    border-style: solid;
     border-width: 10px;
}

/*media all*/
.posts .cover-link {
    border: 3px solid;
    bottom: 0px;
    left: 0px;
    position: absolute;
    right: 0px;
    top: 0px;
    -webkit-transition: border-color 0.3s, border-width 0.3s;
    transition: border-color 0.3s, border-width 0.3s;
    z-index: 4;
}

the size of the post title with

.entry-title, .entry-title a {
font-size: 10px;
}

and removing the post text with

/* Post Text */
.posts .entry-content {
    visibility: hidden;
}

which coincidentally removes the read more icon. I just haven’t figured out how to move the post title to the centre of the box now that the text has been removed and the image appearing on the left or the right is still giving me trouble

@juicyluce9: Please can you start a separate thread on this forum so that the original poster here doesn’t continue to receive email notifications?

You can start a new thread via the following form:

https://www.ads-software.com/support/theme/dyad#postform

We’ll be happy to help with any questions from there.

I was the original poster but I’ve now switched to another theme so you can close the thread. Thanks.