- This topic has 9 replies, 2 voices, and was last updated 5 years, 1 month ago by
.
-
Posts
-
I am just setting up a website and I used the “Shop” template from the “Site Library” and it is setup with 3 icons with text right under the top Hero image. I need to switch out one of those icons, but I don’t understand how those SVG icons are being pulled in. It does not appear to be the Font Awesome stuff which I’m used to. I tried using just a font awesome icon to sub out for the one I need to change, but the Font Awesome icon looks too bold with the other icons I’m keeping. I wanted to just go search through the icon library for a different icon that would work and match the others, but after looking through the code that is pulling in the other icons I was even more confused… I have no idea where these icons are coming from? Can someone please shed som light??
I don’t understand the code that is being pulled in:
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 100 100.759″><path d=”M50 64.732c13.81 0 25.046-11.236 25.046-25.046 0-17.231-22.713-38.267-23.68-39.154a2.02 2.02 0 00-2.731 0c-.967.887-23.681 21.924-23.681 39.154 0 13.81 11.236 25.046 25.046 25.046zm.001-59.911C54.86 9.6 71.005 26.474 71.005 39.686c0 11.583-9.423 21.006-21.005 21.006s-21.006-9.423-21.006-21.006c0-13.197 16.147-30.083 21.007-34.865z”></path><path d=”M50 54.631a2.02 2.02 0 000-4.04c-6.013 0-10.905-4.892-10.905-10.905a2.02 2.02 0 00-4.04 0c0 8.241 6.704 14.945 14.945 14.945z”></path><path d=”M97.98 48.158H79.536a2.02 2.02 0 000 4.04H95.96v15.643c-5.666.438-8.645 2.672-10.875 4.354-1.416 1.068-2.196 1.625-3.098 1.625-.903 0-1.683-.557-3.098-1.625-2.482-1.872-5.881-4.437-12.895-4.437-7.014 0-10.413 2.564-12.895 4.437-1.415 1.067-2.196 1.624-3.098 1.624-.903 0-1.683-.557-3.098-1.625-2.482-1.872-5.882-4.437-12.895-4.437-7.014 0-10.413 2.564-12.895 4.437-1.416 1.068-2.196 1.625-3.098 1.625-.903 0-1.683-.557-3.098-1.625-2.23-1.682-5.209-3.916-10.874-4.354V52.199h16.423a2.02 2.02 0 000-4.04H2.02A2.02 2.02 0 000 50.179V98.74a2.02 2.02 0 002.02 2.02h95.96a2.02 2.02 0 002.02-2.02V50.178a2.02 2.02 0 00-2.02-2.02zM4.04 96.719V71.891c4.285.398 6.478 2.051 8.441 3.531 1.59 1.199 3.234 2.439 5.531 2.439s3.942-1.24 5.531-2.439c2.25-1.698 4.802-3.622 10.462-3.622s8.211 1.924 10.462 3.622c1.59 1.199 3.234 2.439 5.531 2.439 2.297 0 3.941-1.24 5.531-2.439C57.78 73.724 60.33 71.8 65.991 71.8c5.66 0 8.211 1.924 10.462 3.622 1.59 1.199 3.234 2.439 5.531 2.439s3.942-1.24 5.531-2.439c1.963-1.481 4.157-3.133 8.442-3.531v24.828H4.04z”></path><path d=”M36.827 84.517h-5.641a2.02 2.02 0 100 4.04h5.641a2.02 2.02 0 000-4.04zM68.814 84.517h-5.641a2.02 2.02 0 100 4.04h5.641a2.02 2.02 0 000-4.04zM79.791 24.599a2.02 2.02 0 002.503 1.376l9.54-2.77a2.02 2.02 0 00-1.127-3.88l-9.54 2.77a2.022 2.022 0 00-1.376 2.504zM76.714 16.339a2.01 2.01 0 001.229-.418l7.82-6.001a2.021 2.021 0 00-2.46-3.206l-7.82 6.001a2.021 2.021 0 001.231 3.624zM8.165 23.206l9.54 2.77a2.02 2.02 0 001.126-3.879l-9.54-2.77a2.02 2.02 0 10-1.126 3.879zM14.237 9.921l7.82 6.001a2.017 2.017 0 002.833-.372 2.021 2.021 0 00-.372-2.833l-7.82-6.001a2.021 2.021 0 00-2.461 3.205z”></path></svg>
Customer Support
That screenshare didn’t really help — sorry maybe I was not clear in my question. That code snippet I pasted into my post was from that field that you are showing right there. I had found the field where I can put the “Icon SVG HTML”, but I don’t understand how the icon is being referenced — that code is not something I’m familiar with at all, and I can’t figure out how to see the other available icons?
MY QUESTIONS:
(1) How is this Icon being called in — that doesn’t look like typical HTML I’m familiar with, but I’m not familiar with the SVG tag markup either.
(2) Is there somewhere I can look at the other avaiable icons in this set?1) That is the HTML for SVG icon.
2) There aren’t other icons built-in. You can find other icons through some online resources like Bootstrap icons or FontAwesome.
They both offer SVG options.
For example, go to this page:
https://icons.getbootstrap.com/icons/archive-fill/Click Copy HTML then paste it into the field. That’s it 🙂
So I have some PNG icons that I’d like to use instead. How would I replace with those?
PNG would work in the headline or buttons blocks unfortunately.
The best and easiest solution is to find SVG icons.
Or you can also find a graphic designer to turn the PNG into SVG for you.
If I had an SVG I still do not understand how to load it in? Do I put it in the media library?
Just published a video that might help:
That video helped a lot — thanks!
No problem 🙂
- You must be logged in to reply to this topic.
