#01 Adding SVG Icons to Divi Menu

by Ania

February 15, 2021

Here’s the code we’ve added to the Theme Options -> Integration tab (Body section).

<script>
jQuery(document).ready(function($) {
	$('.dl-community>a').prepend('<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 100 100" xml:space="preserve"><defs/><style>.st0{fill:none;stroke:#000;stroke-width:2;stroke-miterlimit:10}</style><g id="Icons_1_"><path d="M78.9 70.3c0 1.9-1.5 3.4-3.4 3.4H31.4L18.6 87.3V73.7h-4.2c-1.9 0-3.4-1.5-3.4-3.4V29.6c0-1.9 1.5-3.4 3.4-3.4h44.1M85.1 43.2H81M82.9 50.1h-3.1" class="st0"/><path d="M57.7 59.2c7.1 2.5 14.6 3.8 22.1 3.9 5.6 0 4.4-6.1.4-6.1h-1.6M57.7 38.5s9.2-6.8 8.4-16.2c-.6-7.2 12.7-3.9 5.3 14.1h14.1c1.9 0 3.4 1.5 3.4 3.4s-1.5 3.4-3.4 3.4h-.4c1.9 0 3.4 1.6 3.4 3.4 0 1.9-1.5 3.4-3.4 3.4h-2.3c1.9 0 3.4 1.5 3.4 3.4s-1.5 3.4-3.4 3.4h-2.6" class="st0"/><path d="M45 36.4h12.8v27.2H45z" class="st0"/></g></svg>');
	$('.dl-home>a').prepend('<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 100 100" xml:space="preserve"><defs/><style>.st0{fill:none;stroke:#000;stroke-width:2;stroke-miterlimit:10}</style><path d="M30.7 89.6l2.1-17.2H15.6l2.1 17.2M48.3 10.4h37.8v79.1H48.3zM89.6 89.6H10.4" class="st0"/><circle cx="58.6" cy="52.1" r="3.1" class="st0"/><path d="M11.5 45.9c0 6.9 6.2 11.7 13.1 11.7-.4-6.9-6.6-11.7-13.1-11.7zM41.4 48.3c-10 0-17.2 6.5-17.2 14.1 10 0 17.2-6.9 17.2-14.1zM36.9 33.1c-7.2 0-12.7 4.8-12.7 10.3 7.2.4 12.7-4.7 12.7-10.3zM24.2 31.4v41" class="st0"/></svg>');
	$('.dl-resources>a').prepend('<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 100 100" xml:space="preserve"><defs/><style>.st0{fill:none;stroke:#000;stroke-width:2;stroke-miterlimit:10}</style><path d="M20.7 19.2h58.6v66H20.7zM33.3 73.1H67M33.3 63.9H67M33.3 54.6H67M33.3 45.4h15.2M33 14.8v13M50 14.8v13" class="st0"/><circle cx="33" cy="30" r="3.7" class="st0"/><path d="M67 14.8v13" class="st0"/><circle cx="67" cy="30" r="3.7" class="st0"/><circle cx="50" cy="30" r="3.7" class="st0"/></svg>');
	$('.dl-tutorials>a').prepend('<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 100 100" xml:space="preserve"><defs/><style>.st0{fill:none;stroke:#000;stroke-width:2;stroke-miterlimit:10}</style><g id="Icons_2_"><path d="M39 78.4H14.6V19.8h70.8v58.6h-2.9M14.6 32.2h70.8" class="st0"/><path d="M23.8 41.4h12.3v12.3H23.8zM45.6 47.6h27.5M45.6 41.4h27.5" class="st0"/><circle cx="60.5" cy="73.5" r="5.2" class="st0"/><path d="M70.8 80.9l4.5 1.2c.8-1.4 1.4-2.9 1.8-4.4L73 75.4c.2-1.3.2-2.6 0-3.9l4.1-2.4c-.4-1.5-1-3-1.8-4.4L70.8 66c-.8-1.1-1.8-2-2.8-2.8l1.2-4.5c-1.4-.8-2.9-1.4-4.4-1.8L62.5 61c-1.3-.2-2.6-.2-4 0l-2.4-4.1c-1.5.4-3 1-4.4 1.8l1.2 4.5c-1.1.8-2 1.7-2.8 2.8l-4.5-1.2c-.8 1.4-1.4 2.9-1.8 4.4l4.1 2.3c-.2 1.3-.2 2.6 0 4l-4.1 2.4c.4 1.5 1 3 1.8 4.4l4.5-1.2c.8 1.1 1.7 2 2.8 2.8l-1.2 4.5c1.4.8 2.9 1.4 4.4 1.8l2.3-4.1c1.3.2 2.6.2 3.9 0l2.4 4.1c1.5-.4 3-1 4.4-1.8L68 83.8c1.1-.8 2.1-1.8 2.8-2.9z" class="st0"/></g></svg>');
	
});	
</script>

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *