how can i align the “fa-message” and the avatar and text along each other
up vote
0
down vote
favorite
i tried to align fa-message icon , the avatar and text along each other but the text is moving under the avatar
this is my code:
<div>
<a href="#"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span> <img src="./girl.jpg" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>
image
html css html5 twitter-bootstrap bootstrap-4
edited Nov 15 at 15:47
Jelle Botman
1
asked Nov 15 at 15:36
chubukas
17
add a comment |
up vote
0
down vote
favorite
i tried to align fa-message icon , the avatar and text along each other but the text is moving under the avatar
this is my code:
<div>
<a href="#"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span> <img src="./girl.jpg" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>
image
html css html5 twitter-bootstrap bootstrap-4
edited Nov 15 at 15:47
Jelle Botman
1
asked Nov 15 at 15:36
chubukas
17
possible that your div has a fixed width that is causing to move the text under the avatar
– Jelle Botman
Nov 15 at 15:48
No, the div don't have a fixed width
– chubukas
Nov 15 at 15:50
1
make theidisplay asinline-blockand that solves it
– Juan Castillo
Nov 15 at 15:55
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
i tried to align fa-message icon , the avatar and text along each other but the text is moving under the avatar
this is my code:
<div>
<a href="#"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span> <img src="./girl.jpg" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>
image
html css html5 twitter-bootstrap bootstrap-4
edited Nov 15 at 15:47
Jelle Botman
1
asked Nov 15 at 15:36
chubukas
17
i tried to align fa-message icon , the avatar and text along each other but the text is moving under the avatar
this is my code:
<div>
<a href="#"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span> <img src="./girl.jpg" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>
image
html css html5 twitter-bootstrap bootstrap-4
html css html5 twitter-bootstrap bootstrap-4
edited Nov 15 at 15:47
Jelle Botman
1
asked Nov 15 at 15:36
chubukas
17
edited Nov 15 at 15:47
Jelle Botman
1
asked Nov 15 at 15:36
chubukas
17
edited Nov 15 at 15:47
Jelle Botman
1
edited Nov 15 at 15:47
Jelle Botman
1
edited Nov 15 at 15:47
Jelle Botman
1
1
asked Nov 15 at 15:36
chubukas
17
asked Nov 15 at 15:36
chubukas
17
asked Nov 15 at 15:36
chubukas
17
17
possible that your div has a fixed width that is causing to move the text under the avatar
– Jelle Botman
Nov 15 at 15:48
No, the div don't have a fixed width
– chubukas
Nov 15 at 15:50
1
make theidisplay asinline-blockand that solves it
– Juan Castillo
Nov 15 at 15:55
add a comment |
possible that your div has a fixed width that is causing to move the text under the avatar
– Jelle Botman
Nov 15 at 15:48
No, the div don't have a fixed width
– chubukas
Nov 15 at 15:50
1
make theidisplay asinline-blockand that solves it
– Juan Castillo
Nov 15 at 15:55
possible that your div has a fixed width that is causing to move the text under the avatar
– Jelle Botman
Nov 15 at 15:48
possible that your div has a fixed width that is causing to move the text under the avatar
– Jelle Botman
Nov 15 at 15:48
No, the div don't have a fixed width
– chubukas
Nov 15 at 15:50
No, the div don't have a fixed width
– chubukas
Nov 15 at 15:50
1
1
make the
i display as inline-block and that solves it– Juan Castillo
Nov 15 at 15:55
make the
i display as inline-block and that solves it– Juan Castillo
Nov 15 at 15:55
add a comment |
4 Answers
4
active
oldest
votes
up vote
0
down vote
accepted
i.picsname2 {
display: inline-block;
vertical-align: middle;
line-height: 1.2;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div>
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span>
<img src="http://placekitten.com/30/30" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i>
</span>
</div>answered Nov 15 at 15:58
ksav
3,91221228
1
Thanks.. it solved it
– chubukas
Nov 15 at 16:01
Great. Be sure to mark the answer as✓ accepted
– ksav
Nov 15 at 16:03
add a comment |
up vote
0
down vote
Using flexbox it's an easy task. Adjust then the space between elements.
.flex-row-centered {
display: flex;
flex-direction: row;
align-items: center;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-row-centered">
<a href="#"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span class="flex-row-centered"> <img src="./girl.jpg" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>Or (since you tagged the question with bootstrap-4) using bootstrap 4 classes:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-direction-row align-items-center">
<a href="#" class="mr-2"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span class="d-flex flex-direction-row align-items-center"> <img src="./girl.jpg" class="img-circle img2 mr-2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>answered Nov 15 at 16:03
abidibo
1,3121020
add a comment |
up vote
0
down vote
Fix #1: font-awesome icons need empty elements
Fix #2: Your tags need to be nested properly. The A and SPAN elements are overlapping. So try this.
<a href="#">
<i class="fa fa-envelope"></i>
<sup><span class="badge badge-success">5</span></sup>
</a>
Now you can set the style display:inline-block; to the span element so it becomes a box preventing text wrapping under the icon.
<span style="display:inline-block;">
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome,<br>John Doe</i>
</span>
Next the reason the .picsname2 text is on a new line is because you've used a <br> element to break line.
Either try:
<div style="display: flex; flex-direction: row; align-items: center;">
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span style="display:inline-block;">
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome,<br />John Doe</i>
</span>
</div>
or remove the line-break like this:
<div>
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span>
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome, John Doe</i>
</span>
</div>
The image will need to be a fixed size to prevent the height changing. Even if we use Flex box you don't want the height of the navbar changing too much otherwise your wasting content space on mobile devices.
answered Nov 15 at 16:10
Studio KonKon
3609
add a comment |
up vote
0
down vote
You can increase your width or use css property display: inline-block or remove that <br/> used before the name.
edited Nov 15 at 16:13
Jelle Botman
1
answered Nov 15 at 15:54
Liviu Nita
13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53322871%2fhow-can-i-align-the-fa-message-and-the-avatar-and-text-along-each-other%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
i.picsname2 {
display: inline-block;
vertical-align: middle;
line-height: 1.2;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div>
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span>
<img src="http://placekitten.com/30/30" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i>
</span>
</div>answered Nov 15 at 15:58
ksav
3,91221228
1
Thanks.. it solved it
– chubukas
Nov 15 at 16:01
Great. Be sure to mark the answer as✓ accepted
– ksav
Nov 15 at 16:03
add a comment |
up vote
0
down vote
accepted
i.picsname2 {
display: inline-block;
vertical-align: middle;
line-height: 1.2;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div>
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span>
<img src="http://placekitten.com/30/30" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i>
</span>
</div>answered Nov 15 at 15:58
ksav
3,91221228
1
Thanks.. it solved it
– chubukas
Nov 15 at 16:01
Great. Be sure to mark the answer as✓ accepted
– ksav
Nov 15 at 16:03
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
i.picsname2 {
display: inline-block;
vertical-align: middle;
line-height: 1.2;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div>
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span>
<img src="http://placekitten.com/30/30" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i>
</span>
</div>answered Nov 15 at 15:58
ksav
3,91221228
i.picsname2 {
display: inline-block;
vertical-align: middle;
line-height: 1.2;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div>
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span>
<img src="http://placekitten.com/30/30" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i>
</span>
</div>i.picsname2 {
display: inline-block;
vertical-align: middle;
line-height: 1.2;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div>
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span>
<img src="http://placekitten.com/30/30" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i>
</span>
</div>i.picsname2 {
display: inline-block;
vertical-align: middle;
line-height: 1.2;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div>
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span>
<img src="http://placekitten.com/30/30" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i>
</span>
</div>answered Nov 15 at 15:58
ksav
3,91221228
edited Nov 15 at 16:02
answered Nov 15 at 15:58
ksav
3,91221228
answered Nov 15 at 15:58
ksav
3,91221228
answered Nov 15 at 15:58
ksav
3,91221228
3,91221228
1
Thanks.. it solved it
– chubukas
Nov 15 at 16:01
Great. Be sure to mark the answer as✓ accepted
– ksav
Nov 15 at 16:03
add a comment |
1
Thanks.. it solved it
– chubukas
Nov 15 at 16:01
Great. Be sure to mark the answer as✓ accepted
– ksav
Nov 15 at 16:03
1
1
Thanks.. it solved it
– chubukas
Nov 15 at 16:01
Thanks.. it solved it
– chubukas
Nov 15 at 16:01
Great. Be sure to mark the answer as
✓ accepted– ksav
Nov 15 at 16:03
Great. Be sure to mark the answer as
✓ accepted– ksav
Nov 15 at 16:03
add a comment |
up vote
0
down vote
Using flexbox it's an easy task. Adjust then the space between elements.
.flex-row-centered {
display: flex;
flex-direction: row;
align-items: center;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-row-centered">
<a href="#"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span class="flex-row-centered"> <img src="./girl.jpg" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>Or (since you tagged the question with bootstrap-4) using bootstrap 4 classes:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-direction-row align-items-center">
<a href="#" class="mr-2"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span class="d-flex flex-direction-row align-items-center"> <img src="./girl.jpg" class="img-circle img2 mr-2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>answered Nov 15 at 16:03
abidibo
1,3121020
add a comment |
up vote
0
down vote
Using flexbox it's an easy task. Adjust then the space between elements.
.flex-row-centered {
display: flex;
flex-direction: row;
align-items: center;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-row-centered">
<a href="#"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span class="flex-row-centered"> <img src="./girl.jpg" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>Or (since you tagged the question with bootstrap-4) using bootstrap 4 classes:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-direction-row align-items-center">
<a href="#" class="mr-2"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span class="d-flex flex-direction-row align-items-center"> <img src="./girl.jpg" class="img-circle img2 mr-2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>answered Nov 15 at 16:03
abidibo
1,3121020
add a comment |
up vote
0
down vote
up vote
0
down vote
Using flexbox it's an easy task. Adjust then the space between elements.
.flex-row-centered {
display: flex;
flex-direction: row;
align-items: center;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-row-centered">
<a href="#"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span class="flex-row-centered"> <img src="./girl.jpg" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>Or (since you tagged the question with bootstrap-4) using bootstrap 4 classes:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-direction-row align-items-center">
<a href="#" class="mr-2"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span class="d-flex flex-direction-row align-items-center"> <img src="./girl.jpg" class="img-circle img2 mr-2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>answered Nov 15 at 16:03
abidibo
1,3121020
Using flexbox it's an easy task. Adjust then the space between elements.
.flex-row-centered {
display: flex;
flex-direction: row;
align-items: center;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-row-centered">
<a href="#"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span class="flex-row-centered"> <img src="./girl.jpg" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>Or (since you tagged the question with bootstrap-4) using bootstrap 4 classes:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-direction-row align-items-center">
<a href="#" class="mr-2"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span class="d-flex flex-direction-row align-items-center"> <img src="./girl.jpg" class="img-circle img2 mr-2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>.flex-row-centered {
display: flex;
flex-direction: row;
align-items: center;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-row-centered">
<a href="#"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span class="flex-row-centered"> <img src="./girl.jpg" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>.flex-row-centered {
display: flex;
flex-direction: row;
align-items: center;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-row-centered">
<a href="#"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span class="flex-row-centered"> <img src="./girl.jpg" class="img-circle img2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-direction-row align-items-center">
<a href="#" class="mr-2"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span class="d-flex flex-direction-row align-items-center"> <img src="./girl.jpg" class="img-circle img2 mr-2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-direction-row align-items-center">
<a href="#" class="mr-2"><span class="fa fa-envelope"><sup>
<span class="badge badge-success">5</span></sup></a></span>
<span class="d-flex flex-direction-row align-items-center"> <img src="./girl.jpg" class="img-circle img2 mr-2">
<i class="picsname2">Welcome,<br>John Doe</i></span>
</div>answered Nov 15 at 16:03
abidibo
1,3121020
edited Nov 15 at 16:08
answered Nov 15 at 16:03
abidibo
1,3121020
answered Nov 15 at 16:03
abidibo
1,3121020
answered Nov 15 at 16:03
abidibo
1,3121020
1,3121020
add a comment |
add a comment |
up vote
0
down vote
Fix #1: font-awesome icons need empty elements
Fix #2: Your tags need to be nested properly. The A and SPAN elements are overlapping. So try this.
<a href="#">
<i class="fa fa-envelope"></i>
<sup><span class="badge badge-success">5</span></sup>
</a>
Now you can set the style display:inline-block; to the span element so it becomes a box preventing text wrapping under the icon.
<span style="display:inline-block;">
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome,<br>John Doe</i>
</span>
Next the reason the .picsname2 text is on a new line is because you've used a <br> element to break line.
Either try:
<div style="display: flex; flex-direction: row; align-items: center;">
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span style="display:inline-block;">
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome,<br />John Doe</i>
</span>
</div>
or remove the line-break like this:
<div>
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span>
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome, John Doe</i>
</span>
</div>
The image will need to be a fixed size to prevent the height changing. Even if we use Flex box you don't want the height of the navbar changing too much otherwise your wasting content space on mobile devices.
answered Nov 15 at 16:10
Studio KonKon
3609
add a comment |
up vote
0
down vote
Fix #1: font-awesome icons need empty elements
Fix #2: Your tags need to be nested properly. The A and SPAN elements are overlapping. So try this.
<a href="#">
<i class="fa fa-envelope"></i>
<sup><span class="badge badge-success">5</span></sup>
</a>
Now you can set the style display:inline-block; to the span element so it becomes a box preventing text wrapping under the icon.
<span style="display:inline-block;">
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome,<br>John Doe</i>
</span>
Next the reason the .picsname2 text is on a new line is because you've used a <br> element to break line.
Either try:
<div style="display: flex; flex-direction: row; align-items: center;">
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span style="display:inline-block;">
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome,<br />John Doe</i>
</span>
</div>
or remove the line-break like this:
<div>
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span>
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome, John Doe</i>
</span>
</div>
The image will need to be a fixed size to prevent the height changing. Even if we use Flex box you don't want the height of the navbar changing too much otherwise your wasting content space on mobile devices.
answered Nov 15 at 16:10
Studio KonKon
3609
add a comment |
up vote
0
down vote
up vote
0
down vote
Fix #1: font-awesome icons need empty elements
Fix #2: Your tags need to be nested properly. The A and SPAN elements are overlapping. So try this.
<a href="#">
<i class="fa fa-envelope"></i>
<sup><span class="badge badge-success">5</span></sup>
</a>
Now you can set the style display:inline-block; to the span element so it becomes a box preventing text wrapping under the icon.
<span style="display:inline-block;">
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome,<br>John Doe</i>
</span>
Next the reason the .picsname2 text is on a new line is because you've used a <br> element to break line.
Either try:
<div style="display: flex; flex-direction: row; align-items: center;">
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span style="display:inline-block;">
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome,<br />John Doe</i>
</span>
</div>
or remove the line-break like this:
<div>
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span>
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome, John Doe</i>
</span>
</div>
The image will need to be a fixed size to prevent the height changing. Even if we use Flex box you don't want the height of the navbar changing too much otherwise your wasting content space on mobile devices.
answered Nov 15 at 16:10
Studio KonKon
3609
Fix #1: font-awesome icons need empty elements
Fix #2: Your tags need to be nested properly. The A and SPAN elements are overlapping. So try this.
<a href="#">
<i class="fa fa-envelope"></i>
<sup><span class="badge badge-success">5</span></sup>
</a>
Now you can set the style display:inline-block; to the span element so it becomes a box preventing text wrapping under the icon.
<span style="display:inline-block;">
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome,<br>John Doe</i>
</span>
Next the reason the .picsname2 text is on a new line is because you've used a <br> element to break line.
Either try:
<div style="display: flex; flex-direction: row; align-items: center;">
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span style="display:inline-block;">
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome,<br />John Doe</i>
</span>
</div>
or remove the line-break like this:
<div>
<a href="#">
<span class="fa fa-envelope"></span>
<sup><span class="badge badge-success">5</span></sup>
</a>
<span>
<img src="./girl.jpg" class="img-circle img2" />
<i class="picsname2">Welcome, John Doe</i>
</span>
</div>
The image will need to be a fixed size to prevent the height changing. Even if we use Flex box you don't want the height of the navbar changing too much otherwise your wasting content space on mobile devices.
answered Nov 15 at 16:10
Studio KonKon
3609
answered Nov 15 at 16:10
Studio KonKon
3609
answered Nov 15 at 16:10
Studio KonKon
3609
answered Nov 15 at 16:10
Studio KonKon
3609
3609
add a comment |
add a comment |
up vote
0
down vote
You can increase your width or use css property display: inline-block or remove that <br/> used before the name.
edited Nov 15 at 16:13
Jelle Botman
1
answered Nov 15 at 15:54
Liviu Nita
13
add a comment |
up vote
0
down vote
You can increase your width or use css property display: inline-block or remove that <br/> used before the name.
edited Nov 15 at 16:13
Jelle Botman
1
answered Nov 15 at 15:54
Liviu Nita
13
add a comment |
up vote
0
down vote
up vote
0
down vote
You can increase your width or use css property display: inline-block or remove that <br/> used before the name.
edited Nov 15 at 16:13
Jelle Botman
1
answered Nov 15 at 15:54
Liviu Nita
13
You can increase your width or use css property display: inline-block or remove that <br/> used before the name.
edited Nov 15 at 16:13
Jelle Botman
1
answered Nov 15 at 15:54
Liviu Nita
13
edited Nov 15 at 16:13
Jelle Botman
1
edited Nov 15 at 16:13
Jelle Botman
1
edited Nov 15 at 16:13
Jelle Botman
1
1
answered Nov 15 at 15:54
Liviu Nita
13
answered Nov 15 at 15:54
Liviu Nita
13
answered Nov 15 at 15:54
Liviu Nita
13
13
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53322871%2fhow-can-i-align-the-fa-message-and-the-avatar-and-text-along-each-other%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
possible that your div has a fixed width that is causing to move the text under the avatar
– Jelle Botman
Nov 15 at 15:48
No, the div don't have a fixed width
– chubukas
Nov 15 at 15:50
1
make the
idisplay asinline-blockand that solves it– Juan Castillo
Nov 15 at 15:55