Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #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 ;)

    #1360389

    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: https://kriesi.at/documentation/enfold/icon/#adding-your-own-fontello-or-flaticon-icons-
    Also, you can try to download icons in https://fontello.com/ and see the format.

    Best regards,
    Nikko

    #1360586

    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 ;)

    #1360659

    are your svg’s monochrome black?
    then go to fontello.com – 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: https://kriesi.at/support/topic/custom-icons-showing-blank/#post-1357932

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

    #1360873

    Hi Alan,

    Please follow @Guenni007’s suggestion :)


    @Guenni007
    thanks for helping out :)

    Best regards,
    Nikko

    #1361126

    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

    #1361130

    did you read further on: https://kriesi.at/support/topic/ajout-dicones-dans-enfold/#post-1356658

    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: https://webers-testseite.de/

    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: https://enfold.webers-webdesign.de/colorized-font-icons/
    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.