[Support request] SVG icons

[Warren]

Hello,

Thanks for reading my post. My website relates to guitar playing. I am trying to get some guitar icons on my site without success lol. I have been looking at a site called “flaticon.com”

I can’t seem to get this working. I want to use the icon feature on GP where you just paste in the SVG icon HTML code instead of having to load an entire icon font file.

What am I missing here? What am I doing wrong? Also, do have any suggestions to which website(s) I should be looking at to find these SVG HTML icons? Where does this magical mysterious code come from? I have been searching for days with no luck.

Thanks,

-Warren

[Elvin]

Hi,

From the same site you’ve mentioned, I’ve easily found an svg file of a guitar.

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 480.025 480.025" style="enable-background:new 0 0 480.025 480.025;" xml:space="preserve">
<g>
	<g>
		<path d="M165.682,378.223l-64-64c-3.124-3.123-8.188-3.123-11.312,0l-24,24c-3.123,3.124-3.123,8.188,0,11.312l64,64
			c3.124,3.123,8.188,3.123,11.312,0l24-24C168.805,386.411,168.805,381.347,165.682,378.223z M136.026,396.567l-52.688-52.688
			l12.688-12.688l52.688,52.688L136.026,396.567z"/>
	</g>
</g>
<g>
	<g>
		<path d="M472.026,67.199c10.666-10.669,10.666-27.963,0-38.632L451.338,7.879c-10.814-10.301-27.81-10.301-38.624,0l-4.688,4.688
			L397.682,2.223L386.37,13.535l10.344,10.344l-12.688,12.688l-10.344-10.344L362.37,37.535l10.664,10.664
			c-3.256,4.58-5.007,10.06-5.008,15.68c0.03,1.432,0.169,2.861,0.416,4.272L261.786,174.807l-6.56-6.56
			c-21.817-21.822-57.193-21.826-79.015-0.009c-0.003,0.003-0.006,0.006-0.009,0.009l-22.504,22.504
			c-13.731,13.739-31.049,23.339-49.976,27.704l-10.96,2.528c-64.376,14.85-104.524,79.076-89.674,143.452
			c5.04,21.851,16.121,41.844,31.978,57.7l22.704,22.704c46.723,46.716,122.47,46.71,169.185-0.013
			c15.848-15.851,26.925-35.835,31.967-57.675l2.536-10.968c4.359-18.928,13.957-36.247,27.696-49.976l22.504-22.504
			c21.786-21.837,21.786-57.187,0-79.024l-6.56-6.56l106.656-106.656c1.411,0.247,2.839,0.386,4.272,0.416
			c5.617-0.001,11.095-1.752,15.672-5.008l10.672,10.664l11.312-11.312l-10.344-10.344l12.688-12.688l10.344,10.344l11.312-11.312
			l-10.344-10.344L472.026,67.199z M300.346,292.391l-22.504,22.504c-15.868,15.846-26.957,35.837-32,57.688l-2.528,10.968
			c-12.865,55.765-68.501,90.543-124.266,77.678c-18.928-4.367-36.247-13.966-49.982-27.702l-22.688-22.704
			c-40.47-40.471-40.47-106.087,0.002-146.558c13.734-13.733,31.05-23.331,49.974-27.698l10.96-2.52
			c21.853-5.043,41.847-16.132,57.696-32l22.512-22.504c15.57-15.572,40.815-15.574,56.388-0.004
			c0.001,0.001,0.003,0.003,0.004,0.004l6.56,6.56l-37.976,37.976c-1.48-0.12-2.968-0.2-4.472-0.2c-26.51,0-48,21.49-48,48
			c0,26.51,21.49,48,48,48c26.51,0,48-21.49,48-48c0-1.504-0.08-2.992-0.216-4.472l37.976-37.976l6.56,6.56
			C315.89,251.578,315.89,276.804,300.346,292.391z M230.65,249.247c12.499,12.494,12.503,32.756,0.009,45.255
			c-0.003,0.003-0.006,0.006-0.009,0.009c-12.668,12.069-32.58,12.069-45.248,0c-12.499-12.495-12.503-32.757-0.008-45.256
			C197.889,236.756,218.15,236.752,230.65,249.247z M250.69,249.903c-4.567-8.887-11.801-16.121-20.688-20.688L376.026,83.191
			l20.688,20.688L250.69,249.903z M460.714,55.879l-36.688,36.68c-4.473,4.281-11.523,4.285-16,0.008l-20.688-20.688
			c-4.415-4.42-4.415-11.58,0-16l36.688-36.68c4.417-4.418,11.579-4.419,15.998-0.002c0.001,0.001,0.002,0.002,0.002,0.002
			l20.688,20.68C465.129,44.299,465.129,51.459,460.714,55.879z"/>
	</g>
</g>
</svg>

You just have to download the svg version of the icons you like from the site mentioned.

You then open the SVG file with a text editor and copy + paste the <svg>...</svg> contents of the file to your site.

A wise man once said:
"Have you cleared your cache?"

[Warren]

Hi Elvin,

Thank you so much for your reply; works like a charm!

Cheers,

-Warren

[Elvin]

No problem. Glad it works for you. 🙂

A wise man once said:
"Have you cleared your cache?"

[Warren]

Outstanding support; thank you!

-Warren

[Elvin]

Outstanding support; thank you!

Thanks. That means a lot to us.

Feel free to open up new topics if you need further help.

Have a great weekend, Happy Holidays! 😀

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts