[Resolved] SVG icon before site-title

[Baz]

Hi, just wondering if it’s possible to have a SVG icon display before the site-title (no logo used)?

I know we can use the ‘:before’ selector for other elements but what CSS for adding a SVG icon (HTML or local file).

Thank you.

[David]

Hi there,

you would need to use this PHP Snippet:

add_filter( 'generate_site_title_output', function( $output ) {
    $titleHTML = '<svg>Your SVG ICON</svg>The Site title';
    return sprintf(
        '<%1$s class="main-title" itemprop="headline">
	<a href="%2$s">%3$s</a>
	</%1$s>',
	( is_front_page() && is_home() ) ? 'h1' : 'p',
	esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ),
	$titleHTML
    );
});

Simply edit the $titleHTML = '<svg>Your SVG ICON</svg>The Site title'; to include your inline SVG followed by the Title Text.

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

[Baz]

Thank you for the super quick response David.

[David]

You’re welcome

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

[Author]

Posts