• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Blog
  • About
  • Contact
  • Newsletter
  • Membership
  • Login
Home ยป SVG

SVG

Use SVG Icons – the correct way

.icon {
	display: inline-block;
	min-width: 5px;
	min-height: 5px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.icon.icon-print {
	background-image: url('../images/icons/print.svg');
    min-width: 20px;
    min-height: 20px;
}
<i class="icon icon-print"></i>

Filed Under: Free Tagged With: CSS, SVG

How to use single social icon with svg sprite without include the whole Font Awesome icon set

Create a file named sprite.svg

<svg>
	<symbol id="fb-icon" viewbox="-20 -20 200 200">
		<path fill="white" d="M91.84,71.34l3.37-21.99h-21.1V35.08c0-6.02,2.95-11.88,12.4-11.88h9.59V4.49c0,0-8.7-1.49-17.03-1.49	C61.7,3,50.35,13.53,50.35,32.59v16.76H31.04v21.99h19.31v53.15h23.77V71.34H91.84z"/></path>
	</symbol>
</svg>

Paste this in functions.php

function add_image_sprite_map(){
    include('assets/images/sprite.svg');
}
add_action('storefront_before_header', 'add_image_sprite_map');

Use the icon wherever You want

<a target="_blank" href="" rel="noopener noreferrer">
    <svg class="fb-svg"><use xlink:href="#fb-icon" /></svg>
</a>

Filed Under: Free Tagged With: SVG

How to add SVG logo to Genesis

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

 
 
Forgot Password

Filed Under: Premium Tagged With: SVG

Animate SVG zoom and rotate

Click here

Filed Under: Free Tagged With: SVG

Allow SVG upload to Media

//ALLOW SVG UPLOAD ONLY FOR ADMINISTRATORS
function cc_mime_types($mimes) {
    if ( current_user_can( 'manage_options' ) ) {
        $mimes['svg'] = 'image/svg+xml';
    }
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

Filed Under: Free Tagged With: SVG

Primary Sidebar

Gabor Flamich

Hi! I'm Gabor.
I write tutorials on WordPress and WooCommerce.

MacBook

12 Essential Snippets for Genesis Developers

Subscribe to my Newsletter to view my basic collection of Genesis snippets that I use for my projects!

Sign Up for Free
  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
UpdraftPlus Premium

Tags

ACF Ajax Analytics API Bootstrap Breadcrumb category CPT CSS fetch Genesis Google Maps Gutenberg HTML Isotope JavaScript jQuery loop Map Menu Parallax PHP SASS SEO SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Webpack Wholesale WooCommerce WordPress WPML

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy / Terms of Service
© 2023 WP Flames - All Right Reserved