Tagged: icons, whitespace
-
AuthorPosts
-
March 20, 2016 at 10:35 pm #600906
Dear reader,
I would llike to have the whitespace between the Icon and text the same.
I have created a temporary page and highlighted in yellow the area of the whitespace.
Currently the text is offset when enumeration is being used, like you can see on the temporay page.
Hopefully you have a solution for this.Front end page;
http://world2cycle.com/cycling-videos/Back end page;
http://world2cycle.com/wp-admin/post.php?post=795&action=editMarch 21, 2016 at 6:37 pm #601439Hi michael_world2cycle!
Thank you for using our theme.
Can you provide us a link to the page, where you use this event list in HTML? With the screenshot it is imposible for us to find the correct CSS to style this problem.
Regards,
GünterMarch 21, 2016 at 9:24 pm #601509Thanks Günter for the quick reply.
On the back end the link is;
http://world2cycle.com/wp-admin/post.php?post=125&action=editAt the front end
http://world2cycle.com/paris-roubaix/I am using in the text block the following styling;
[av_font_icon icon='ue803' font='fontello' style='' caption='' link='' linktarget='' size='10px' position='left' color=''][/av_font_icon]09th April 2016[av_font_icon icon='ue806' font='fontello' style='' caption='' link='' linktarget='' size='10px' position='left' color=''][/av_font_icon]20 (starting price)
[av_font_icon icon='ue841' font='entypo-fontello' style='' caption='' link='' linktarget='' size='10px' position='left' color=''][/av_font_icon]70, 139 or 163km
And hereby the code used in the excerpt field;
<ul style="list-style-type:none"> <li><span class="av_font_icon avia_animate_when_visible av-icon-style- av-no-color avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style=""><span class="av-icon-char" style="font-size:10px;line-height:10px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span>9th of April</li> <li><span class="av_font_icon avia_animate_when_visible av-icon-style- av-no-color avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style=""><span class="av-icon-char" style="font-size:10px;line-height:10px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span>70, 139 or 163km</li> <li><span class="av_font_icon avia_animate_when_visible av-icon-style- av-no-color avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style=""><span class="av-icon-char" style="font-size:10px;line-height:10px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span> 1500, 2500 or 5000hm</li>
Hopefully the shared information will help.
- This reply was modified 8 years, 8 months ago by Yigit.
March 24, 2016 at 9:40 am #602907Did you already found the time to have a look.
When more information is needed please let me know.
Looking forward to receive your ideas for this issue.March 24, 2016 at 1:24 pm #602993Hi!
Please turn on custom CSS field for ALB elements – kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and edit your text block and give it a custom CSS class and then add following code to Quick CSS in Enfold theme options under General Styling tab
.your-custom-class .av_font_icon { margin-right: 20px; }
Cheers!
YigitMarch 29, 2016 at 10:32 pm #604808Thanks Yigit,
For mentioning the steps.
I did try but I am not sure if I did the right thing in this case.I need to keep the class name unique and named it w2c-icon
Now I have added this in the Quick CSS
. w2c-icon .av_font_icon {
margin-right: 20px;I do see the possibility of adding a Custom Css class when opening the in this case the text block.
In the open field I have typed the following: w2c-iconSo adding the custom CSS field for ALB elements seems to work, so I am close.
Can you please assist by explaing what went wrong in this case?Thanks!
March 30, 2016 at 8:08 pm #605419Hey!
use this code instead:
.w2c-icon .av_font_icon { margin-right: 20px; }
Best regards,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.