Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #1360341

    Hi, I have designed a set of icons, how do I upload these icon, and how do I access them in then design.

    Alan ;)


    Hi Alan,

    Is it in webfont format? (file types: .eot, .svg, .ttf, .woff, and .woff2)
    If yes, then you can go to Enfold > Import/Export > Iconfont Manager, then upload the fonts in zip form, for further information you can check our documentation:
    Also, you can try to download icons in and see the format.

    Best regards,


    Hi Nikko,
    Ok, but I need to upload and use my own designs.
    I have a set of 7 icons saved as svg, in a zipped folder, but I can not add them to enfold.
    How are they added to Enfold

    Alan ;)


    are your svg’s monochrome black?
    then go to – and drag&drop the svg’s to the input field on top of that page.
    give a name to your set and download the zip from there. this zip upload to enfold.

    if fontello got some error warnings – f.e. on compound path – this little detour can help:

    if not ( multicolor svg’s) we had to find a different solution.


    Hi Alan,

    Please follow @guenni007‘s suggestion :)

    @guenni007 thanks for helping out :)

    Best regards,


    Hi, that´s not a useable way for me, the design changes to one color design and no fill color, I need colors to make my design work


    did you read further on:

    you can upload your svg files to media-library and replace existing font-icons. So you can use the enfold insertion of font-icons – and replace them by css:
    f.e. with an unimated svg or gif:

    webdesing column

    after my posting i recognized that some icons are in span etc. you had to adjust the replacement code then

    [data-av_icon="\e837"] {
    	content: " ";
    	background-image: url(/wp-content/uploads/ezgif-4-64b6614e32.gif);
    	background-size: contain;
    	background-repeat: no-repeat;
           font-size: 0 !important

    Yes – it’s a bit of work, but it’s worth doing this way.
    You convert your colored svgs in icomoon app to black svgs – upload them to fontello and then import them into Enfold. Then you replace the black pendents with the colored svgs via css. Then you have the advantage to use these colored icons like font-icons everywhere where they can be positioned in Enfold Alb elements.

    and btw. if you only like to have colorized icons f.e. with gradient:
    ( You need to be more specific with this selector here – to not address all icons on the page )

    [data-av_icon]:before {
     background: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-stroke: 0px blue;   /*** you even can have strokes on the icons ***/
      -webkit-text-fill-color: transparent;

    for example:
    i named the svgs analog to the code the black icons have on the fontello font

    in edit mode:

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.