Adding SVG icon in headings (h1, h2, etc..)

  • Resolved John

    (@dsl225)


    3 years, 3 months ago

    Hello,

    Thanks for this great plugin!

    I’m using this CSS snippet for adding external Font Awesome icons in headings, like H1 here:

    h1:before {
   content: "\f192  ";
	font-family: "FontAwesome";
	color: red;
}

    Would it be possible to do the same with SVG icons uploaded in the Media Library?

    I tried to add the icon’s URL for “content” but doesn’t seem to work.
    My icon URL is something like this:
    https://example.com/wp-content/uploads/2021/11/test.svg

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Benjamin Zekavica

    (@benjamin_zekavica)

    Hallo ?? I’m so sorry but this plugin is only to update SVG Files in the Media library. If you want to display, than you have to embet the FontAwesome Font into your CSS file.

    If you don’t have experience than you can look for a plugin here on www.remarpro.com for FontAwesome. Than you can use this libary.

    Greetings from Germany
    Benjamin Zekavica

    Thread Starter John

    (@dsl225)

    Thanks, well noted.

    Hi I am uploading an animated svg and it keeps getting changed e.g.

    
<use xlink:href="#r1" transform="rotate(60 160 160)"></use>

    It keeps adding the </use> and then it stops the svg showing. How can I stop the plugin from doing this as it shows up blank then.
    Thanks

    Plugin Author Benjamin Zekavica

    (@benjamin_zekavica)

    @nanny7 Yes for this usecase you have to use the hooks. In my plugin I added SVG Sanitizer for clean the files. Add this to your functions.php and modify your used tags and attributes.

    // XML TAGS
    add_filter( 'esw_svg_allowed_tags', function ($tags) {
        $tags[] = 'p';
        $tags[] = 'info';

        return $tags;
    } );
    // XML attributes
    add_filter( 'esw_svg_allowed_attributes', function ( $attributes ) {
        $attributes[] = 'src';

        return $attributes;
    } );
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding SVG icon in headings (h1, h2, etc..)’ is closed to new replies.