Docs

[wnhorne246]

Hi all,

I have a quick question about margins around icons within a text box. I have inserted an icon for Facebook and raised it’s size and changed it’s color with the following snippet… [icon type=”facebook-square” style=”font-size: 40px; color: #3b5998;”]. The only issue is, there are margins above and below the icon now which off-centers the icon and the click actions (red line that surrounds the icon after it is clicked) do no hug up against the icon on the top and bottom. You can see this in action at dev.emilycolin.com/contact/. I’ll also attach a screen shot of the issue I’m seeing.

What I need help with is a way to remove all margins around the icon.

I’m figuring the solution is simple, but that’s why I went with X. Less headaches!

Thanks for your help.

[wnhorne246]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! Add a line-height: 0; css property on your icon, same way how you add the font-size: 50px;.

Then you can add this under Custom > CSS in the Customizer to get rid of that red border issue.

a:focus, select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="submit"]:focus, input[type="checkbox"]:focus {
outline: none !important;
}

Hope it helps, Cheers!

[wnhorne246]

Thanks. The line-height worked mostly. There is still a little margin on the top and bottom. Maybe there is a way to remove that too?

As for the CSS for the red line… That just removes the highlights all together. I think if the margins were fixed, the red lines will look right.

[Rad]

Hi there,

Should the highlights stay? In what particular condition?

And for the margin, please add this CSS as well,

.page-id-30 .x-text p:last-child, .x-text p:nth-last-child(2) {
margin-bottom: 5px;
}

Thanks!

[wnhorne246]

Yes, the highlights should stay. When you click on an icon, I would like the highlights to hug the icon the same on the top and bottom as it does on the side.

I think I’m really close now. I’m happy with how this looks on the contact page (except for the highlights alignment). I also used this same method of inserting these same icons on the main/home page in a widget area in a text box. It’s weird… when looking from a desktop or laptop, it looks as if the icons are underlined. I added a Goodreads icon with an image that is not underlined. I’ve attached a screenshot. Is the a way to get rid of the underline in this area?

[wnhorne246]

Also, what is the method of changing the color of the highlights?

[Rupok]

Hi there,

Thanks for writing back. This is what i can see on your page right now – http://prntscr.com/b9txef

If you are referring the focus state as “highlight” then you can modify this and add the color under Custom CSS :

a:focus, select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="submit"]:focus, input[type="checkbox"]:focus {
  outline: 5px auto #dd3333;
} 

Hope this helps.

Cheers!

[wnhorne246]

Sorry for the confusion. What you were looking at in your screenshot was not the page I was talking about. This issue is on the home page in the right sidebar under “Follow Me.”

“I also used this same method of inserting these same icons on the main/home page in a widget area in a text box. It’s weird… when looking from a desktop or laptop, it looks as if the icons are underlined. I added a Goodreads icon with an image that is not underlined. I’ve attached a screenshot. Is the a way to get rid of the underline in this area?”

The CSS for the Focus state worked great by the way. Thanks for that.

[Rad]

Hi there,

Please add this CSS as well,

  .textwidget a {
  text-decoration: none !important;
  }

Hope this helps.

[wnhorne246]

Thank you sir. This topic is resolved and can be closed.

[Rad]

You’re welcome :), Sure!

[Author]

Posts