0
こんにちは私のヘッダーにある私のソーシャルメディアのアイコンは反応的ですが、ブラウザを最小限に抑えればソーシャルメディアのアイコンは表示されません。誰かに私にそれをする方法を教えてもらえますか？私はこれに対してメディアクエリを使用すべきですか？ヘッダ内のレスポンシブルなリンク
以下は最小化しない場合の画像です。 
ここでは、ソーシャルメディアアイコンが最小化されたときの画像が表示されなくなりました。 
ここは私のhtmlコードです。ここ
<!DOCTYPE html>
<html>
<head>
<title>Student Portal</title>
<link rel="stylesheet" href ="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link href="style.css" rel ="stylesheet">
<link rel="shortcut icon" type="img/png" href="img/asd.png"/>
</head>
<body>
<div class ="top-bar-dark">
<div class="container">
<div class="row">
<div class="col-sm-4 hidden-xs">
<div class="top-bar-socials">
<a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts">
<i class="fa fa-facebook"></i>
</a>
<a href="https://twitter.com/official_gapc">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
<div class="col-sm-8 text-right">
<ul class="list-inline top-dark-right">
<li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> [email protected]</li>
<li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li>
<li><a href="#" class="login"><i class="fa fa-lock"></i> Login</a></li>
</ul>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.12.4.min.js"></script>
</body>
</html>
は私のCSSは
.top-bar-dark {
background-color: #a92419;
}
.top-bar-light {
background-color: #f3f3f3;
}
.top-bar-light .top-dark-right li {
border-color: #ddd;
}
.top-bar-light .top-dark-right li a:hover {
color: #32c5d2;
}
.top-bar-socials {
line-height: 30px;
padding-top: 5px;
}
.top-bar-socials:after {
display: table;
clear: both;
content: "";
}
.top-bar-socials a {
margin: 0px 8px;
text-decoration: none;
font-size:18px;
color: #fff;
}
.top-dark-right {
margin: 0px;
padding: 0px;
}
.top-dark-right li {
line-height: 40px;
border-left: 1px solid #932015;
padding: 0px 10px;
}
.top-dark-right li, .top-dark-right li a {
color: #d7d7d7;
font-size: 12px;
}
.top-dark-right li i {
margin-right: 5px;
}
.top-dark-right li a:hover {
color: #fff;
}
a.login{
text-decoration: none;
}
.fa-facebook:hover{
color:#3b5998;
}
.fa-twitter:hover{
color:#1dcaff;
}
.fa-linkedin:hover{
color:#007bb5;
}
UPDATEです：私は "隠された-XS" を削除した後 彼らは合わせていません。 
を編集したことをここでこれを確認することができますか？ – nethken
メールにどのように調整しますか？あなたはデスクトップビューを参照していますか？あなたは社会的なアイコンが右に揃えたいですか？ – chrismauck
私は電子メール、連絡先、ログインを参照しています。私はソーシャルメディアのアイコンをそれらに合わせたいと思っています。ソーシャルメディアのアイコンが電子メール、連絡先、ログインの一番上にあるので、あなたは私に手がかりを与えることができますか？ – nethken