Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • August 8, 2015 at 8:21 pm #484848
    dday900

    I’m writing text in a widget for my enfold site, and I want to use an icon (like a phone and email icon).

    This code seems to work:

    <span class=”av-icon-char” aria-hidden=”true” data-av_icon=”xxxx” data-av_iconfont=”entypo-fontello”>

    However the “xxxx” is the part that’s wrong, where do I find a list of code for the icons so that I can put in the code there?

    August 8, 2015 at 9:54 pm #484855
    Basilis

    Hi dday900!

    We are using the following list of icons, inside our theme:
    http://fontello.github.io/entypo/demo.html

    Let me know if I can help with something else.

    Cheers!
    Basilis

    August 9, 2015 at 6:54 pm #484927
    dday900

    Ok how do I make it work in the widget code: <span class=”av-icon-char” aria-hidden=”true” data-av_icon=” ” data-av_iconfont=”entypo-fontello”></span>

    When i copy-paste the icon into the data-av_icon=” ” field, it works but the next time I hit save it’s gone. The icon disappears every time I hit save on the widget.

    August 9, 2015 at 6:56 pm #484928
    Basilis

    Hey!

    That must be an issue with the plugins or cache.
    Please disable plugins and let us know.

    Best regards,
    Basilis

    February 9, 2018 at 7:06 pm #910362
    Mickyhood

    Hi, when i put this:

    <span class=”av-icon-char” aria-hidden=”false” data-av_icon=”icon-cup” data-av_iconfont=”entypo-fontello”></span>

    in the text of a widget with personalized HTML, the icon not is that i chosen. Why?

    • This reply was modified 6 years, 9 months ago by Mickyhood.
    February 10, 2018 at 7:01 am #910488
    Rikard

    Hi Mickyhood,

    Could you post a link to where can we see the problem please?

    Best regards,
    Rikard

    February 12, 2018 at 11:13 am #911013
    Mickyhood

    Ok, I solved with the icon code taken directly from the “icon” element of the theme.

    But now there is another problem. Is not it possible to insert, with a shortcode, the icon in a custom button in HTML and CSS?

    The site is under private content.

    I want to insert an icon in the button “reset”.

    February 13, 2018 at 4:24 am #911479
    Ismael

    Hi,

    The theme’s button shortcode has an icon option. Have you tried that?

    Best regards,
    Ismael

    February 13, 2018 at 11:13 am #911611
    Mickyhood

    Yes but this button has done in code only. I think that i can use one simply shortcode for the icon.

    February 14, 2018 at 1:59 am #912024
    Ismael

    Hi,

    Just add the icon shortcode above the input element or button. We can then use some css to move the icon above the button.

    Best regards,
    Ismael

    February 14, 2018 at 10:39 am #912176
    Mickyhood

    How do i do it?

    The button has the following code:

    February 15, 2018 at 3:12 am #912582
    Ismael

    Hi,

    Please add the icon shortcode right after the paragraph opening tag.

    
<p align="center"><span class="reseticon">ICON SHORTCODE HERE</span><input type=”reset” class="bottoneresetta" value="Reset" data-icon="refresh"></p>

    Use the “reseticon” class attribute to adjust the icon’s position.

    Best regards,
    Ismael

    February 15, 2018 at 10:44 am #912688
    Mickyhood

    Ok and the ICON SHORTCODE HERE which?

    February 16, 2018 at 5:07 am #913092
    Ismael

    Hi,

    You can generate the shortcode icon from a temporary post or page. Look for the shortcode generator icon — a wand with the light blue color. If you can’t find the shortcode generator, please provide the login details in the private field.

    Best regards,
    Ismael

    February 16, 2018 at 10:59 am #913202
    Mickyhood

    ok i find the code, is this: [av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' size='20px' position='left' color=''][/av_font_icon]

    • This reply was modified 6 years, 8 months ago by Mickyhood.
    February 17, 2018 at 7:00 am #913519
    Victoria

    Hi Mickyhood,

    Do you want the icon on the button?

    Best regards,
    Victoria

    February 17, 2018 at 7:03 pm #913703
    Mickyhood

    Yes.

    February 18, 2018 at 8:17 am #913816
    Victoria

    Hi Mickyhood,

    Does this mean the issue can be closed?

    Best regards,
    Victoria

    February 18, 2018 at 11:54 am #913881
    Mickyhood

    no I had asked what is the code for the icon to be inserted in the code of the button. You have not answered yet.

    February 19, 2018 at 6:35 am #914142
    Ismael

    Hi,

    We added the following css code.

    .resetbutton {
    width: 200px;
    margin: 0 auto;
    position: relative;
}

.bottoneresetta {
    width: 100%;
}

.reseticon {
    position: absolute;
    top: 13px;
    left: 20px;
}

    You should see the icon above the reset button.

    Best regards,
    Ismael

    February 19, 2018 at 10:27 am #914180
    Mickyhood

    Ok but i want that the icon is inside the button. Can it be?

    February 19, 2018 at 4:02 pm #914334
    Victoria

    Hi v,

    You need to put the icon inside the input.

    Form Field Elements having Icon Inside it

    Something like

    
input {
   background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
   padding-left:30px;
}

    Best regards,
    Victoria

    February 19, 2018 at 4:02 pm #914336
    Victoria

    Hi Mickyhood,

    You need to put the icon inside the input.

    Form Field Elements having Icon Inside it

    Something like

    
input {
   background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
   padding-left:30px;
}

    Best regards,
    Victoria

    • This reply was modified 6 years, 8 months ago by Victoria.
    January 10, 2020 at 7:19 am #1172066
    srmdcortes-digital

    Hi! Can you please share how you were able to solve this?

    January 12, 2020 at 4:52 pm #1172542
    Mike

    Hi,
    Sorry for the late reply, in this thread a couple of solutions were provided, but it seems the css solution was the one used in the end.
    If this doesn’t help you then please explain what you are trying to achieve and link to an example so we can assist.

    Best regards,
    Mike

  • Author
    Posts
Viewing 25 posts - 1 through 25 (of 25 total)
  • You must be logged in to reply to this topic.