How can I place my icons and heading in one line

Question

I don't know why but I used a heading <h1> and then some icons using font-awesome <i> . For some reason they do not display next to each other in one line.

The heading is in one line and the icons are below the heading.

This is the code i am using

   <div id="footer">
            <h1>foot</h1>
            <i class="fab fa-facebook"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-youtube"></i>
   </div>


#footer {
   clear:both;
   max-height:200px;
   width: 100%;
   background-color: yellow;

}
#footer i {
   margin: 10px;
   font-size: 30px;}

Because `h*` tag will fill in the while line by default... Try `display: inline-block` on the h1. — Adrian, Sep 29 '20 at 18:46
Adriana6 answered the question, but an `h1` tag in a footer isn't semantically correct, and the parent should usually use the actual `
` [tag](https://www.w3schools.com/tags/tag_footer.asp) for even further semantic compliance, also don't need the `clear:both` since you're not floating anything, just a quick note. — Chris W., Sep 29 '20 at 18:50

score 0 · Answer 1 · answered Sep 29 '20 at 18:49

foot showed on one line because the default style contains display: block. Update that attribute to display: inline-block and you can see all items of footer in one line.

#footer {
clear:both;
max-height:200px;
width: 100%;
background-color: yellow;

}
#footer h1 {
  display: inline-block;
}
#footer i {
margin: 10px;
font-size: 30px;}

 <div id="footer">
            <h1>foot</h1>
            <i class="fab fa-facebook">a</i>
            <i class="fab fa-instagram">b</i>
            <i class="fab fa-twitter">c</i>
            <i class="fab fa-youtube">d</i>
        </div>

How can I place my icons and heading in one line

1 Answers1