title: How to place a line break after font awesome icon in a list?
body: <p>I am trying to create a LinkedIn-like menu with buttons formed from icons on top of text but I cannot find a way to insert line breaks in CSS form after my FontAwesome icons. For the rest, my script looks fine for my preference.</p>
  
  <p>Although there's <code>display:block</code> in <code>#sidebar nav ul li</code> for some reason it doesn't provide with the wanted result and recently I've also tried entering <code>&lt;br&gt;</code> as <code>content</code> after the icon.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
       margin: 0;
       padding: 0;
       border: 0;
       font-size: 100%;
       font: inherit;
       vertical-align: baseline;
  }
   html {
       box-sizing: border-box;
  }
   *, *:before, *:after {
       box-sizing: inherit;
  }
   body, input, select, textarea {
       color: rgba(0, 0, 0, 0.55);
       font-family: Arial, Helvetica, sans-serif;
       font-size: 16.5pt;
       font-weight: normal;
       line-height: 1.5;
  }
   .icon {
       text-decoration: none;
       border-bottom: none;
       margin-right: 5px;
       position: relative;
       color: rgba(0, 0, 0, 0.55);
  }
   .icon:before {
       font-size: 1.75em;
       font-style: normal;
       text-transform: none !important;
  }
   ul.icons {
       cursor: default;
       list-style: none;
       padding-left: 0;
  }
   ul.icons li {
       display: inline-block;
       padding: 0 0.75em 0 0;
  }
   ul.icons li:last-child {
       padding-right: 0;
  }
   ul.icons li &gt; a, ul.icons li &gt; span {
       border: 0;
       text-decoration: none;
  }
   ul.icons li &gt; a:before, ul.icons li &gt; span:before {
       font-family: FontAwesome;
       font-style: normal;
       font-weight: normal;
       text-transform: none !important;
  }
   ul.icons li &gt; a .label, ul.icons li &gt; span .label {
       display: none;
  }
   ul.menu {
       list-style: none;
       padding: 0;
  }
   ul.menu &gt; li {
       border-left: solid 1px rgba(0, 0, 0, 0.5);
       display: inline-block;
       line-height: 1;
       margin-left: 1.5em;
       padding: 0 0 0 1.5em;
  }
   ul.menu &gt; li:first-child {
       border-left: 0;
       margin: 0;
       padding-left: 0;
  }
   @media screen and (max-width: 480px) {
       ul.menu &gt; li {
           border-left: 0;
           display: block;
           line-height: inherit;
           margin: 0.5em 0 0 0;
           padding-left: 0;
      }
  }
   #sidebar {
       padding: 2.5em 2.5em 0.5em 2.5em ;
       background: #ffffff;
       border-right: 1px solid black;
       cursor: default;
       height: 100vh;
       left: 0;
       overflow-x: hidden;
       overflow-y: auto;
       position: fixed;
       text-align: right;
       top: 0;
       width: 18em;
       z-index: 10000;
  }
   #sidebar &gt; .inner {
       display: flex;
       flex-direction: column;
       justify-content: center;
       min-height: 100%;
       opacity: 1;
       width: 100%;
  }
   body.is-ie #sidebar &gt; .inner {
       height: 100%;
  }
   #sidebar nav &gt; ul {
       list-style: none;
       padding: 0;
       white-space: pre: 
  }
   #sidebar nav &gt; ul &gt; li {
       margin: 1.5em 0 0 0;
       opacity: 1;
       padding: 0;
       position: relative;
  }
   #sidebar nav a {
       border: 0;
       color: rgba(0, 0, 0, 0.35);
       display: block;
       font-size: 0.6em;
       font-weight: bold;
       letter-spacing: 0.25em;
       line-height: 1.75;
       outline: 0;
       padding: 1.35em 0;
       position: relative;
       text-decoration: none;
       text-transform: uppercase;
  }
   #sidebar nav a:before, #sidebar nav a:after {
       border-radius: 0.2em;
       bottom: 0;
       content: '';
       height: 0.3em;
       position: absolute;
       right: 0;
       width: 100%;
  }
   #sidebar nav a:before {
       background: rgb(0, 0, 0, 0.5);
  }
   #sidebar nav a:after {
       background-image: -moz-linear-gradient(to right, #003085, #029bde);
       background-image: -webkit-linear-gradient(to right, #003085, #029bde);
       background-image: -ms-linear-gradient(to right, #003085, #029bde);
       background-image: linear-gradient(to right, #003085, #029bde);
       max-width: 0;
  }
   #sidebar nav a:hover {
       color: rgba(0, 0, 0, 0.55);
  }
   #sidebar nav a.active {
       color: #4267b2;
  }
   #sidebar nav a.active:after {
       max-width: 100%;
  }
   #sidebar nav a.active span {
       color: #4267b2;
  }
   @media screen and (max-width: 1280px) {
       #sidebar {
           border-right: 0px;
           border-bottom: 1px solid black;
           height: 3.5em;
           left: 0;
           line-height: 3.5em;
           overflow: hidden;
           padding: 0;
           text-align: center;
           top: 0;
           width: 100%;
      }
       #sidebar &gt; .inner {
           flex-direction: row;
           align-items: stretch;
           height: inherit;
           line-height: inherit;
      }
       #sidebar nav {
           height: inherit;
           line-height: inherit;
      }
       #sidebar nav ul {
           display: -moz-flex;
           display: -webkit-flex;
           display: -ms-flex;
           display: flex;
           height: inherit;
           line-height: inherit;
           margin: 0;
      }
       #sidebar nav ul li {
           display: block;
           height: inherit;
           line-height: inherit;
           margin: 0 0 0 2em;
           padding: 0;
      }
       #sidebar nav a {
           height: inherit;
           line-height: 2em;
      }
       #sidebar nav a:after {
           background-image: none;
           background-color: #4267b2;
      }
       #sidebar nav span:after {
           content: "&lt;/br&gt;";
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;LinkedIn like menu&lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /&gt;
    &lt;link rel="stylesheet" href="assets/css/main2.css" /&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" /&gt;
   &lt;/head&gt;
   &lt;body&gt;
  
    &lt;section id="sidebar"&gt;
     &lt;div class="inner"&gt;
      &lt;nav&gt;
       &lt;ul&gt;
        &lt;li&gt;&lt;a href="#home"&gt;&lt;span class="icon fas fa-user"&gt;&lt;/span&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#about"&gt;&lt;span class="icon fas fa-search"&gt;&lt;/span&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#contact"&gt;&lt;span class="icon fas fa-phone"&gt;&lt;/span&gt;Contact&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/nav&gt;
     &lt;/div&gt;
    &lt;/section&gt;
  
    &lt;script src="assets/js/main.js"&gt;&lt;/script&gt;  
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>