[Support request] Adding Post Type Icons

[Ying]

Try this CSS:

.format-video .gb-container.clickable-container:after{
    content:""\f04b"";
}
.format-image .gb-container.clickable-container:after{
    content:""\f030"";
}
.format-gallery .gb-container.clickable-container:after{
    content:""\f03e"";
}
:is(.format-video,.format-image,.format-gallery) .gb-container.clickable-container:after {
    position: absolute;
    left: 80%;
    top: 85%;
    font-family: "FontAwesome";
    font-size: 15px;
    line-height: 1;
    color: #fff;
    padding: 10px;
    border: 2px solid #fff;
    border-radius: 100%;
    z-index: 999;
    background: rgba(0,0,0,0.4);
    max-width: 35px;
    max-height: 35px;
}

[John]

Hi there Ying,
works but it removes the Cards overlay, witch is essential for them post-titles to be visible.
Any idea on how to fix that?

cheers
John

[David]

Yeah… its not going to work with that method, as both the :before and :after pseudo elements are being used on those post styles.
Instead you could do the following:

1. Add a Headline block into your Query Loop. Set its element tag to DIV just so it has no styling.
1.1 Don’t add any text to it.
1.2 In the Icon field, ADD your FA Icon as explained here:

https://docs.generateblocks.com/article/adding-custom-svg-icons/

BUT instead of adding 1 x Icon SVG, add ALL 3 eg.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 384c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48z"/></svg>

Note the order they are added, i used Video, Image, Gallery.

1.3 In Advanced > Additional CSS Class(es) add: format-icon

1.4 Adjust the font size and colors of the icon as to how you want it.

2. Now we can use some CSS to hide the icons we don’t require:

.format-icon svg {
	display: none;
}
.format-video .format-icon svg:nth-child(1) {
	display: block;
}
.format-image .format-icon svg:nth-child(2) {
	display: block;
}
.format-gallery .format-icon svg:nth-child(3) {
	display: block;
}

If you want to try that method, to see if the icon shows correctly. If it does we can then look at the CSS for positioning it.

3. Added bonus, add this PHP Snippet to remove ALL icons on posts that are NOT one of the three formats, so we don’t print unnecessary HTML:

add_filter( 'render_block', function( $block_content, $block ) {
        
    if ( 
        ! empty( $block['attrs']['className'] ) 
        && 'format-icon' === $block['attrs']['className']  
        && !has_post_format( array( 'video', 'image', 'gallery' ))
    ) {
        return null;
    }

    return $block_content;
}, 10, 2 );

Let me know.

NOTE: The advantage of this method is you don’t need to load ALL the Font Awesome icon library.

[Author]

Posts