- This topic has 6 replies, 2 voices, and was last updated 12 months ago by
Arp.
-
AuthorPosts
-
April 17, 2020 at 10:40 am #1243310
Arp
I have some SVG icons that I’d like to use but there’s nothing in the documentation about this field. Is it possible to use my own icons or no?
April 17, 2020 at 4:40 pm #1243607Tom
Lead DeveloperLead DeveloperHi there,
It is, you just need to copy the SVG HTML (open the file in an editor) and paste it into the Custom SVG field in the options.
Let me know if you need more info π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 20, 2020 at 10:46 am #1246978Arp
I ended up using background images via css, the svgs threw me for a loop.
April 20, 2020 at 5:11 pm #1247302Tom
Lead DeveloperLead DeveloperHi there,
If you have an
.svg
file, you can open it up in Notepad or a code editor like Atom.Then you’ll see something like this:
<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg"> <path d="M485.2 427.8l-99.1-46.2 15.8-34c5.6-11.9 8.8-24.3 10-36.7 3.3-33.7-9-67.3-33.2-91.1-8.9-8.7-19.3-16.1-31.3-21.7-11.9-5.6-24.3-8.8-36.7-10-33.7-3.3-67.4 9-91.1 33.2-8.7 8.9-16.1 19.3-21.7 31.3l-15.8 34-30.4 65.2c-.7 1.5-.1 3.3 1.5 4l65.2 30.4 34 15.8 34 15.8 68 31.7 74.7 34.8c-65 45.4-152.1 55.2-228.7 17.4C90.2 447.4 44.1 313.3 97.3 202.6c53.3-110.8 186-158.5 297.8-106.3 88.1 41.1 137.1 131.9 129.1 223.4-.1 1.3.6 2.4 1.7 3l65.6 30.6c1.8.8 3.9-.3 4.2-2.2 22.6-130.7-44-265.4-170.5-323.5-150.3-69-327-4.1-396.9 145.8-70 150.1-5.1 328.5 145.1 398.5 114.1 53.2 244.5 28.4 331.3-52.3 17.9-16.6 33.9-35.6 47.5-56.8 1-1.5.4-3.6-1.3-4.3l-65.7-30.7zm-235-109.6l15.8-34c8.8-18.8 31.1-26.9 49.8-18.1s26.9 31 18.1 49.8l-15.8 34-34-15.8-33.9-15.9z" class="st0"></path></svg>
That’s the code you paste into the Icon SVG HTML field.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 21, 2020 at 10:11 am #1248267Arp
Thank you! Is that safe? When I was trying to figure out how to use the SVG I read that they need to be ‘cleaned’ or something.
April 21, 2020 at 3:53 pm #1248577Tom
Lead DeveloperLead DeveloperThe code is sanitized when it’s added to the HTML field and when it’s saved π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentApril 22, 2020 at 9:39 am #1249557Arp
Sweet!
-
AuthorPosts
- You must be logged in to reply to this topic.