Jump to content
Sign in to follow this  
VJG

Alignment of Font Icons

Recommended Posts

VJG    0
VJG

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
catrina    103
catrina

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?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
James B    436
James B

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;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
VJG    0
VJG

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×