.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>
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>
To view the full content, please sign up for the membership.
If You are already a member, please log in below:
//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');