Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #170149

    Hey guys,
    Quick question. I don’t even know if I am building this right but I wanted to have icons next to some text and links in my footer. so I just but together a small text widget and added some font icon code and html to make the widget look the way I want.

    The question is this: How do I target the icons and move them down say 4 pixels? I don’t like how they appear to sit a bit above the line next to them on the right. It is very noticable on the envelope at the bottom. I have tried a few different ways but it isn’t working. with the surounding brackets I don’t know how to right little inline css to manipulate them. Would you mind writing the code that moves one of the icons down say 4 pixels? I can duplicate for the other two. thanks.

    for reference:


    [av_font_icon font="entypo-fontello" icon="ue821" size="15px" position="left"]<span style="margin-left: 5px;">218 Viceroy Street
    <span style="margin-left: 21px;">Billings, MT 59101
    [av_font_icon font="entypo-fontello" icon="ue854" size="15px" position="left"]<span style="margin-left: 7px;"><a href="tel:4067942593">406. 794. 2593</a>
    [av_font_icon font="entypo-fontello" icon="ue805" size="14px" position="left"]<span style="margin-left: 6px;"><a href="mailto: (Email address hidden if logged out) ?Subject=" target=""> (Email address hidden if logged out) </a>



    dang this used to work and just paste right into the post.



    Can you post a link to your website?



    in the footer. the code is above that built it. Is this something that I would change in my child style.css file? or can it just be changed in the inline code of the widget are? what is the normal practice for this?



    Please add following code to Quick CSS in Enfold theme options

    #footer .av_font_icon { margin-top: 4px; }



    Hey Yigit,
    That worked perfectly thanks.

    But to take it further. what if I had to target them individually. Would I then have to do it in the widgit area? If so how? if not how do you target them each in the css? I don’t see any unique id’s when I inspect the element



    You can inspect the element then copy the actual html code. Put it on the text widget instead of the shortcode. Add a unique css selector to each icons.

    Best regards,


    Ismael this sounds like a brilliant solution. But for some reason the process seams so hard for me. Unless there is a better way of implementing icons in widget areas. I first create a new page and use the icon shortcode to generate it. then I copy that code into the widget area. This was fine until i needed to change them.

    If I inspect a rendered shortcode like you mentioned I do get different code.

    <span class="av_font_icon avia-icon-pos-left" style="font-size:15px;line-height:15px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>

    but as you can see the icon = a square. If I just type the shortcode numeric code (example ue821) then the browser just renders the text not the icon. But in that html code it would be easy to ass another class after avia-icon-pos-left and then target that in css.

    So for me it was easier to just use the code generated after creating the shortcode, as the numeric code works in thsi manner. But then I cant target it so far with my skills.

    Would it be too much of a pain for me to ask that someone provide an example with the proper code placed in the widget area, along with css that has the power to say change the color or position of a specific icon.



    The HTML code:

    	<p><span id="footer_icon_1" class="av_font_icon  avia-icon-pos-left" style="font-size:15px;line-height:15px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span style="margin-left: 5px;">218 Viceroy Street<br><span style="margin-left: 21px;">Billings, MT 59101</span></span></p>
    	<p><span id="footer_icon_2" class="av_font_icon  avia-icon-pos-left" style="font-size:15px;line-height:15px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span style="margin-left: 7px;"><a href="tel:4067942593">406. 794. 2593</a></span></p>
    	<p><span id="footer_icon_3" class="av_font_icon  avia-icon-pos-left" style="font-size:14px;line-height:14px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span style="margin-left: 6px;"><a href="mailto: (Email address hidden if logged out) ?Subject=" target=""> (Email address hidden if logged out) </a></span></p>

    The CSS to change each icon:

    #footer_icon_1, #footer_icon_2, #footer_icon_3{
    	/* Applies to the three icons */
            position: relative;
    	/* Applies to icon 1 */
            color: red;
           top: 2px;
    	/* Applies to icon 2 */
            color: blue;
           top: 5px;
    	/* Applies to icon 3 */
           color: green;
           top: 3px;

    Best regards,


    Hey Josue
    Thats great thanks. But what about the data-av_icon=””

    So is the following the proper way to accomplish this?
    1. First you render the icon on a page or whatever using the shortcode.
    2. then publish page
    3. Then inspect page
    4. then copy past the code into the widget area. Meaning you are copy pasting literally a “square” and then it will render the proper icon?

    Whats the deal with the squares?



    It appears those squares are the same, but they are not, try it.

    Best regards,

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Targeting font icons in a footer widget’ is closed to new replies.