How to align favicons in a row under span tag-CodePudding

I am trying to align two favicons under a span tag for a media query in css but having trouble. I tried to put the media query as display: block; which is moving the two icons under the span, which is good but then it's moving the second icon under the first one

final output should look like this below once going to 560px screen size. I've attached a snippet

   Check Us Out!
   icon_1 icon_2

#social_media{
  background: linear-gradient(to right bottom, #270627, #3e0742, #550660, #6b0481, #8104a4, #921bb6, #a32cc9, #b43bdc, #c553e0, #d46ae4, #e27fe9, #ee95ee);
  padding: 10px;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
}


#row_media{
  text-align: center;
  width: 100%;
}

#social_media span{
  margin-right: 20px;
  font-size: 30px;
  font-family: Impact, fantasy;
  color: white;
}

#social_media a{
  text-decoration: none;
}

#social_media i{
  margin-right: 8px;
  font-size: 30px;
}

@media screen and (max-width: 560px) {
  #social_media i{
    display: block;

  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="social_media">
      <div  id="row_media">
        <div >
          <span>Check Us Out!</span>
          <a href="test.com"><i ></i></a>
          <a href="#"><i ></i></a>
        </div>
      </div>
    </div>

CodePudding user response：

#social_media{
  background: linear-gradient(to right bottom, #270627, #3e0742, #550660, #6b0481, #8104a4, #921bb6, #a32cc9, #b43bdc, #c553e0, #d46ae4, #e27fe9, #ee95ee);
  padding: 10px;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
}


#row_media{
  text-align: center;
  width: 100%;
}

#social_media span{
  margin-right: 20px;
  font-size: 30px;
  font-family: Impact, fantasy;
  color: white;
}

#social_media a{
  text-decoration: none;
      display: inline-block;
}

#social_media i{
  margin-right: 8px;
  font-size: 30px;
}

@media screen and (max-width: 560px) {
  #social_media i{
    display: block;

  }
}

<div id="social_media">
      <div  id="row_media">
        <div >
          <span>Check Us Out!</span>
          <div class = "row">
          <a href="test.com"><i >In</i></a>
          <a href="#"><i >Fa</i></a>
          </div>
        </div>
      </div>
    </div>

CodePudding user response：

I have prepared a solution to your problem. I placed the fontawesome icons in <div > and then added a flex setting to <div>.

#social_media{
    background: linear-gradient(to right bottom, #270627, #3e0742, #550660, #6b0481, #8104a4, #921bb6, #a32cc9, #b43bdc, #c553e0, #d46ae4, #e27fe9, #ee95ee);
    padding: 10px;
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
  }
  
  i {
      color: whitesmoke;
  }

  .icons {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  #row_media{
    text-align: center;
    width: 100%;
  }
  
  #social_media span{
    margin-right: 20px;
    font-size: 30px;
    font-family: Impact, fantasy;
    color: white;
  }
  
  #social_media a{
    text-decoration: none;
  }
  
  #social_media i{
    margin-right: 8px;
    font-size: 30px;
  }
  
  @media screen and (max-width: 560px) {
    #social_media i{
      display: block;
  
    }
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div id="social_media">
        <div  id="row_media">
          <div >
            <span>Check Us Out!</span>
              <div >
                <a href="test.com"><i ></i></a>
                <a href="#"><i ></i></a>
              </div>
          </div>
        </div>
      </div>
</body>
</html>

CodePudding user response：

TO align the icons use the flex property this would align the elements side by side. Here I have used the flex property in the Css and later applied it to my HTML code. I have provided the Css and Html code for your reference

CSS

#social_media{
  background: linear-gradient(to right bottom, #270627, #3e0742, #550660, #6b0481, #8104a4, #921bb6, #a32cc9, #b43bdc, #c553e0, #d46ae4, #e27fe9, #ee95ee);
  padding: 10px;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,0.25);
}


#row_media{
  text-align: center;
  width: 100%;
}

.icon-decoration {
    width: 50%;
      float: left;
    padding: 20px;
    display:inline-block;
    margin-right:20px;
    flex: 1;
    border: 2px solid yellow;
}

#social_media span{
  margin-right: 20px;
  font-size: 30px;
  font-family: Impact, fantasy;
  color: white;
}

#social_media a{
  text-decoration: none;
      display: inline-block;
}

#social_media i{
  margin-right: 8px;
  font-size: 30px;
}

@media screen and (max-width: 560px) {
  #social_media i{
    display: block;

  }
}

HTML

<div id="social_media">
      <div  id="row_media">
        <div >
          <span>Check Us Out!</span>
          <div class = "row">
          <a href="test.com"><i >In</i></a>
          <a href="#"><i >Fa</i></a>
          </div>
        </div>
      </div>
    </div>