Inspiring

Answered

alignment issue of horizontal icons with one as an img pulled in, wrapping to nxt line

2 replies
458 views
Translate

The trouble is the blog icon is an image. It is wrapping to next line. How can I get it into the mix? It will be last in the horizontal lineup. Lastly, I would ideally like the icons slightly closer together. Would that be handled in the ID with negative padding? I may have already tried that with no resolve.

</div>

</div>

----------------------------------------------------

.social ul {

float: left;

}

.social {

padding: 33px 0 0 1px;

margin-left: -20px;

}

.social a {

background-size: contain;

display: inline-block;

height: 33px;

width: 43px;

}

.blog a {

background: rgba(0, 0, 0, 0) url("images/blog.png");

}

.blog a:hover {

background: rgba(0, 0, 0, 0) url("images/blog_over.png");

}

#socialIconID {

color: #7e75a2;

font-size: 38px;

margin-left: -90px;

}

Appreciate the help!

This topic is closed to new replies. Start a new post to keep the conversation going.

O

osgood_Correct answer

Legend

Just include it within another anchor tag with the class of blog, after the font awesome icons;

Then give it a height and width to match the blog image size (presumably its only small).

.blog {

background: url("images/blog.png");

width: 100px; /* height of blog image */

height: 30px; /* width of blog image */

display: inline-block;

}

.blog:hover {

background: url("images/blog_over.png");

}

O

osgood_Correct answer

Legend

Just include it within another anchor tag with the class of blog, after the font awesome icons;

Then give it a height and width to match the blog image size (presumably its only small).

.blog {

background: url("images/blog.png");

width: 100px; /* height of blog image */

height: 30px; /* width of blog image */

display: inline-block;

}

.blog:hover {

background: url("images/blog_over.png");

}

Translate

O

osgood_

Legend

You might even want to consider using Flexbox:

<!DOCTYPE html>

<html>

<head>

<title>Flexbox Align</title>

<style>

#socialIconID {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

}

#socialIconID a {

display: inline-block;

margin: 0 7px;

color: #666;

}

#socialIconID a i {

font-size: 25px;

margin: 0;

padding: 0;

}

.blog {

background: url("images/blog.png");

width: 20px; /* height of blog image */

height: 20px; /* width of blog image */

display: inline-block;

background-color: #666;

margin: 0 0 0 4px;

}

.blog:hover {

background: url("images/blog_over.png");

background-color: #999;

}

</style>

</head>

<body>

</div>

</body>

</html>

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.