How to Change Font Size and Color of Image Captions

[Data]

I am using WordSmith, the image captions are same-sized like regular page content. I want to depreciate the captions form the normal content. Kindly do let me know how to change its color and font size. I read previous form threads, but none of them work on my site.

[Leo]

Hi there,

Try this CSS:

.wp-block-image figcaption {
    font-size: 10px;
    color: #000000;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Data]

Thank you. Just one more thing, can we place an in-line small icon alongside the image caption?

[David]

Hi there,

you can use a :before pseudo element to add an image:

.wp-block-image figcaption:before {
    content: url(your_image_url_here);
    margin-right: 1em;
}

You will want the image to be the exact dimensions as it cannot be resized with CSS.
The content property accepts unicodes for font icons as well.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts