Tagged: , , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 8, 2014 at 10:45 am #261705
    tocal

    Hi guys,

    I’m trying to use the short code for the Entypo icons inline with some text copy. I am using them as bullets. At the moment they are aligning strictly to the right, left or centre of the containing <div> as opposed to the text. You can see this here: http://bluestar.tocal.net/

    What I am trying to achieve is a look more like this: http://bluestar.tocal.net/wp-content/uploads/2014/05/Demo.png where the bullets sit inline with the text.

    I can achieve this by removing the class tags from the containing span element. I.e. from this:

    <span class="av_font_icon avia_animate_when_visible av-icon-style-  avia-icon-pos-left  avia_start_animation avia_start_delayed_animation" style="color:#034da2; border-color:#034da2;">
<span class="av-icon-char" style="font-size:18px;line-height:18px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
</span>
</span>

    to this:

    <span style="color:#034da2; border-color:#034da2;">
<span class="av-icon-char" style="font-size:18px;line-height:18px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
</span>
</span>

    Could you advise on whether there is a better way to do this and, if not, how I can make that class change in the theme files?

    Many thanks,
    Tom

    May 9, 2014 at 9:03 am #262237
    Dude

    Hi tocal!

    You should be able to do this with:

    
.avia-icon-pos-left {
float: none;
}

.av_font_icon {
display: inline;
}

    However I recommend to add a custom class to the text field (see: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and to use a more specific css selector. Otherwise this change will affect all icons on your website.

    Best regards,
    Peter

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