Targeting font icons in a footer widget - Support | Kriesi.at

Tagged: font icons, footer, icons, Widget

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
October 3, 2013 at 11:09 pm #170149
allegrabillings
Participant
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:

[IMG]http://i.imgur.com/SAtgl2H.jpg[/IMG]
```
[av_font_icon font="entypo-fontello" icon="ue821" size="15px" position="left"]218 Viceroy Street
Billings, MT 59101

[av_font_icon font="entypo-fontello" icon="ue854" size="15px" position="left"]<a href="tel:4067942593">406. 794. 2593</a>

[av_font_icon font="entypo-fontello" icon="ue805" size="14px" position="left"]<a href="mailto: (Email address hidden if logged out) ?Subject=" target=""> (Email address hidden if logged out) </a>
```
October 3, 2013 at 11:10 pm #170151

allegrabillings
Participant

[URL=http://imgur.com/SAtgl2H][IMG]http://i.imgur.com/SAtgl2H.jpg[/IMG][/URL]

October 3, 2013 at 11:11 pm #170153

allegrabillings
Participant

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

http://i.imgur.com/SAtgl2H.jpg

October 4, 2013 at 1:55 am #170197

Josue
Inactive Moderator

Hey!

Can you post a link to your website?

Cheers!
Josue

October 4, 2013 at 6:57 pm #170565

allegrabillings
Participant

http://www.jackandaddi.com

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?

October 4, 2013 at 7:15 pm #170571
Yigit
Keymaster
Hi!

Please add following code to Quick CSS in Enfold theme options
```
#footer .av_font_icon { margin-top: 4px; }
```
Cheers!
Yigit
October 5, 2013 at 12:36 am #170633

allegrabillings
Participant

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

October 6, 2013 at 2:51 am #170946

Ismael
Moderator

Hey!

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

October 7, 2013 at 10:25 pm #171899

allegrabillings
Participant

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.



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.

October 10, 2013 at 2:03 am #173339
Josue
Inactive Moderator
Hey!

The HTML code:
```
	218 Viceroy Street Billings, MT 59101

	<a href="tel:4067942593">406. 794. 2593</a>

	<a href="mailto: (Email address hidden if logged out) ?Subject=" target=""> (Email address hidden if logged out) </a>
```
The CSS to change each icon:
```
#footer_icon_1, #footer_icon_2, #footer_icon_3{
	/* Applies to the three icons */
 position: relative;
}
#footer_icon_1{
	/* Applies to icon 1 */
 color: red;
 top: 2px;
}
#footer_icon_2{
	/* Applies to icon 2 */
 color: blue;
 top: 5px;
}
#footer_icon_3{
	/* Applies to icon 3 */
 color: green;
 top: 3px;
}
```
Best regards,
Josue
October 14, 2013 at 9:42 pm #175263

allegrabillings
Participant

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?

October 14, 2013 at 9:52 pm #175267

Josue
Inactive Moderator

Hey!

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

Best regards,
Josue
Author

Posts