1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved SVG files as icon set?

Discussion in 'Free Divi Community Forum' started by Scott Douglas, Jan 31, 2020.

  1. Scott Douglas

    Scott Douglas Member

    Hi, I was wondering if it's possible to upload svg files to be used as icons?

    My client had a graphic designer design a proof, and as part of their work, they created custom icons, like the phone, the geo pin marker, shopping cart, etc.

    I was wondering if there's anyway to use these in Divi via css or otherwise. Ideally they'd be able to be used ahead of lines of text (on the same line) for example, directly before the address line of text on the same line.

    I have SafeSVG... so that's a start, is it possible to do?
     
    #1 Scott Douglas, Jan 31, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Just treat the SVG as an image. For example, in the blurb module, just load your svg file as an image, instead of icon.
     
    #2 Divi.Help, Feb 1, 2020
  3. Scott Douglas

    Scott Douglas Member

    Okay, I was looking for a different application, and using them as icons, similar to how font awesome has their icons that can inserted into a text or code module ahead of text... right now I'm using the font awesome ones. You can see in this testing site, the top header above the main nav bar has them ahead of the address, phone, and hours: http://www2.pcdc.net/~vscr/testing/

    Is there a way to use my own svg's in place of the font awesome icons? As I noticed the font awesome icons take a split second longer to load at times.
     
    #3 Scott Douglas, Feb 1, 2020
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    I see for font awesome, you are inserting the HTML in a text module.

    If you wish to use text module to insert the SVG, you can either insert the SVG code inline directly, or just treat it as an image & input the image HTML: <img src="image.svg">

    Or you can just place the SVG as an image in the blurb module, just like what I mentioned earlier.
     
    #4 Divi.Help, Feb 2, 2020
  5. Scott Douglas

    Scott Douglas Member

    Got it, thanks!
     
    #5 Scott Douglas, Feb 3, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo
(You must log in or sign up to post here.)