Archived

This topic is now archived and is closed to further replies.

  • 0

Alignment of Font Icons

Question

Posted · Report post

Hi,

Please see attached thumbnail.

The grey area is a ContentBox.

The two icons are placed in a two column grid.

I need to horizontally center the icons in each cell. 

Earlier, I had a small icon and a large icon displaying on the page.

Although, I have hidden the small icon by CSS, it is getting centered.

How do I center the large icon?

 

CSS I've used to hide the small icon

 

[class^="icon-"], [class*=" icon-"]{
    background:none!important;
    background-image: none;
}
 

Thanks much.

Vj

post-7772-0-42625800-1357756455_thumb.pn

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

Thanks, the alignment issue is resolved just be using the background-position attribute.

Share this post


Link to post
Share on other sites

Posted · Report post

The icon images themselves may have some extra padding that needs to be taken off the left side. Can you please post a link to your site?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, you can apply a negative margin to the icon to make it move to the left more

 

.icon-time {
    background-position: -20px -4px !important;
    margin-left: -19px !important;
}

Share this post


Link to post
Share on other sites