Как мы можем добавить значки и опции в строке заголовка?

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;
}

Изображение значка заголовка

Answer 1

это было что-то вроде этого, что вы ищете?

с использованием шрифта и значков и flexbox для создания выровненной по правому краю панели навигации

шрифт потрясающий: https://fontawesome.com/icons?from=io

Flexbox: https://css -tricks.com / сниппеты / CSS / а-руководство к 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>