title: Missing icons in unordered list
body: <p>I have this unordered list with fontawesome icon instead of the default list style. My problem is that in the second level the icon is only displayed for the first list item.
  I am using the pseudo before to display the icons and when I check it with inspector the pseudo before is there for each list item, but it is not displayed for all of them.</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>.docs-sidebar {
          background-color: #f0f0f0;
          min-height: 500px;
          padding-top: 25px;
      }
  
      .docs-sidebar ul {
          list-style: none;
      }
  
      .docs-sidebar ul li::before {
          content: "\f105";
          color: #5f88c2;
          font-family: 'FontAwesome';
          position: absolute;
          top: 0px;
          left: -15px;
      }
  
      .docs-sidebar ul li a {
          color: #727272;
          font-size: 16px;
      }
  
      .docs-sidebar ul li a:hover {
          color: #5f88c2;
          text-decoration: none;
      }
  
      .docs-sidebar ul li ul.dropdown-menu {
          background-color: transparent;
          border: none;
      }
  
      .docs-sidebar ul li ul li {
          padding-left: 20px;
      }
  
      .docs-sidebar ul li ul.dropdown-menu li::before {
          content: "\f105";
          color: #5f88c2;
          font-family: 'FontAwesome';
          position: absolute;
          top: 8px;
          left: 8px;
      }
  
      .docs-sidebar ul li ul li a {
          font-size: 14px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;section id="cl-content"&gt;
      &lt;div class="container"&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-lg-4"&gt;
  
                  &lt;div class="docs-sidebar"&gt;
                      &lt;ul&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;Settings &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu" role="menu"&gt;
                                 &lt;li&gt;&lt;a href="#"&gt;List item 1&lt;/a&gt;&lt;/li&gt;
                                 &lt;li&gt;&lt;a href="#"&gt;List item 2&lt;/a&gt;&lt;/li&gt;
                                 &lt;li&gt;&lt;a href="#"&gt;List item 3&lt;/a&gt;&lt;/li&gt;
                                 &lt;li&gt;&lt;a href="#"&gt;List item 4&lt;/a&gt;&lt;/li&gt;
                                 &lt;li&gt;&lt;a href="#"&gt;List item 5&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  
              &lt;/div&gt;
  
              &lt;div class="col-lg-8"&gt;
                  Some text ....
              &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>