[Resolved] Add icon before category

Home Forums Support Add icon before category

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #920486
    epickenyan

    Hi. How do I add the GP SVG icon that appears before the category on my blog section?

    #920536
    David
    Staff
    Customer Support

    Hi there,

    are you using a custom function for the Post meta? If so can you share that with us, and we can take a look at including the SVG markup within that.

    #920776
    epickenyan

    It was a code shared by Tom. Here it is (it is working in posts though).

    add_filter( 'generate_post_date_output', function( $output, $time_string ) {
    	$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
    
    	if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
    		$time_string = '<time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%4$s</time>';
    	}
    
    	$time_string = sprintf( $time_string,
    		esc_attr( get_the_date( 'c' ) ),
    		esc_html( get_the_date() ),
    		esc_attr( get_the_modified_date( 'c' ) ),
    		esc_html( get_the_modified_date() )
    	);
    
    	printf( '<span class="posted-on">%s</span> ', // WPCS: XSS ok, sanitization ok.
    		$time_string
    	);
    
            if ( ! is_single() ) {
                $categories_list = get_the_category_list( ', ' );
        
                if ( $categories_list ) {
                    echo '<span class="cat-links">' . $categories_list . '</span>';
                }
            }
    }, 10, 2 );
    #920786
    David
    Staff
    Customer Support

    Try this instead:

    add_filter( 'generate_post_date_output', function( $output, $time_string ) {
    	$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
    
    	if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
    		$time_string = '<time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%4$s</time>';
    	}
    
    	$time_string = sprintf( $time_string,
    		esc_attr( get_the_date( 'c' ) ),
    		esc_html( get_the_date() ),
    		esc_attr( get_the_modified_date( 'c' ) ),
    		esc_html( get_the_modified_date() )
    	);
    
    	printf( '<span class="posted-on">%s</span> ', // WPCS: XSS ok, sanitization ok.
    		$time_string
    	);
    
            if ( ! is_single() ) {
                $categories_list = get_the_category_list( ', ' );
        
                if ( $categories_list ) {
                    echo '<span class="cat-links"><span class="gp-icon icon-categories">
                            <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0 1 43.592 27.907l12.349 26.791A16 16 0 0 0 228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" fill-rule="nonzero"></path>
                            </svg>
                        </span>' . $categories_list . '</span>';
                }
            }
    }, 10, 2 );  
    #920992
    epickenyan

    The HTML is there, but the icons are not showing.

    #921008
    David
    Staff
    Customer Support

    Have you removed the filter, as i can’t see the markup

    #921009
    epickenyan

    Yes, I did and replaced it with the new filter you shared.

    #921017
    David
    Staff
    Customer Support

    Try this CSS:

    .entry-header .gp-icon {
        display: inline-block;
    }
    #921021
    epickenyan

    That worked! Thanks, David.

    #921081
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.