-
AuthorPosts
-
November 16, 2013 at 5:22 am #189534
Hello,
I bought this theme a couple days ago and still trying to wrap my head around everything. So far, so good… but one design I’m having trouble trying to re-create is a clean Contact Details area in a footer widget. I am trying to make it look similar to this:http://oi40.tinypic.com/2qvxri1.jpg
In other themes, there are glyph classes I would reference. In Enfold, it would seem icon fonts would be the avenue; however, I’m not sure if I’m understanding the proper way to use them. This is what I’ve tried:
[av_font_icon color="" font="entypo-fontello" icon="ue842" size="16px" position="left" link="" linktarget="" alttext=""] <strong>Address:</strong> PO Box 123 <br />Lexington, VA 24450 [av_font_icon color="" font="entypo-fontello" icon="ue80a" size="16px" position="left" link="" linktarget="" alttext=""] <strong>Phone:</strong> 800-555-1212 [av_font_icon color="" font="entypo-fontello" icon="ue805" size="16px" position="left" link="" linktarget="" alttext=""] <strong>Email:</strong> <a href="mailto: (Email address hidden if logged out) "> (Email address hidden if logged out) </a>
The problem with the above is that it doesn’t line up nicely (and doesn’t feel right, lol). Before I spend time writing classes to clean it up, I wanted to check and see if I’m on the right track or if there’s a simpler way to accomplish this. Seeing the icon tabs and other elements containing icons lead me to believe there may be, which is why I wanted to ask here.
Thanks!
DamonNovember 16, 2013 at 8:26 pm #189668Hi Damon,
Can you post the link to your website please?
Regards,
JosueNovember 16, 2013 at 9:34 pm #189686This reply has been marked as private.November 16, 2013 at 9:43 pm #189689Hi!
You need to wrap the second line inside a ‘span’ and put it a class so we can target it with CSS and push it:
[av_font_icon color="" font="entypo-fontello" icon="ue842" size="16px" position="left" link="" linktarget="" alttext=""] <strong>Address:</strong> PO Box 123 <span class='line_2'>Lexington, VA 24450</span>
.line_2{ padding-left: 70px; display: block; }
Result:
The same would be for the others, just play around padding-left to align them as you want.
Cheers!
Josue -
AuthorPosts
- The topic ‘Clean Contact Details in Widget’ is closed to new replies.