我们如何添加图标＆amp;标题栏中的选项？

Question

我在网页上使用简单的空白标题。如何像在图像中提到的那样在右侧对齐中添加图标？我读了StackOverflow上的所有线程，但都没有用，请提供一个简单的脚本，我做这个响应..谢谢！

#header_container {
background: #232F3E ;
color:#fff;
border:1px solid #232F3E;
height:auto;
left:0;
position:fixed;
width:100%;
top:0;
}

#header {
height:42px;
line-height:42px;
margin:0 auto;
width:auto;
font-weight:bold;
text-align:left;
}

Header Icon Image

Answer 1

你想要的是这样吗？

使用字体真棒图标和flexbox创建右对齐导航栏

字体真棒： https://fontawesome.com/icons?from=io

Flexbox的： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

$('#navButton').click(function() {
  $('.subNav').slideToggle('slow', function() {});
});

.navigation {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  list-style-type: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-end;
  background-color: #5d80ba;
  height: 40px;
  z-index: 50;
}

.navigation li {
  display: inline-flex;
  flex-direction: row;
}

.navigation li a {
  padding: 10px;
  cursor: pointer;
  justify-content: space-between;
}

.navigation li a:hover {
  color: #dddddd;
  background-color: #334ba1;
}

.subNav {
  display: none;
  position: fixed;
  top: 40px;
  right: 0;
  width: 100px;
  background-color: #8f80ba;
  z-index: 40;
  list-style-type: none;
}

.subNav li {
  display: inline-block;
  width: 45px;
  padding-top: 10px;
  padding-bottom: 10px;

}

.subNav li:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<ul class="navigation">
  <li>
    <a><i class="fas fa-bed"></i></a>
  </li>
  <li>
    <a><i class="fas fa-beer"></i></a>
  </li>
  <li>
    <a><i class="fas fa-utensils"></i></a>
  </li>
  <li>
    <a><i class="fas fa-utensils"></i></a>
  </li>
  <li>
    <a><i class="fas fa-bed"></i></a>
  </li>
  <li>
    <a><i class="fas fa-beer"></i></a>
  </li>
  <li>
    <a><i class="fas fa-utensils"></i></a>
  </li>
  <li>
    <a id="navButton"><i class="fas fa-bars"></i></a>
  </li>

</ul>

<ul class="subNav">
  <li>
    <a><i class="fas fa-bed"></i></a>
  </li>
  <li>
    <a><i class="fas fa-utensils"></i></a>
  </li>
  <li>
    <a><i class="fas fa-beer"></i></a>
  </li>
  <li>
    <a><i class="fas fa-utensils"></i></a>
  </li>
  <li>
    <a><i class="fas fa-beer"></i></a>
  </li>
  <li>
    <a><i class="fas fa-utensils"></i></a>
  </li>
</ul>