title: How to resize list-style-images?
body: <p>Just doing some practice by recreating the tumblr website, Im having some issues with the right side where it says <strong>"Recommended Blogs</strong>". I want to implement the use of a small user icon logo instead of the list style bullet. Is it possible to <strong>resize the images in css</strong>? or would i have to <strong>resize the image in photoshop?</strong></p>
  
  <p>Take a look at <a href="https://codepen.io/LordEric/pen/OQwbbK?editors=1100" rel="nofollow noreferrer">My Code pen</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Tumblr&lt;/title&gt;
      &lt;script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="tumblrstyle.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- Header Navigation  --&gt;
      &lt;div class="top-head"&gt;
          &lt;header&gt;
              &lt;div id="top-head-left"&gt;
                  &lt;h1&gt;T&lt;/h1&gt;
                  &lt;input type="text" name="" placeholder=""&gt;
                  &lt;i class="fas fa-search"&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;div id="top-head-right"&gt;       
                  &lt;a href="#"&gt;&lt;i class="fas fa-home fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;i class="far fa-compass fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;i class="fas fa-envelope fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;i class="far fa-comment fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;i class="fas fa-bolt fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;i class="fas fa-user fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/header&gt;
      &lt;/div&gt;
  &lt;!-- End Header --&gt;
  
  &lt;!-- RightBar --&gt;
  &lt;div class="container"&gt;
      &lt;div class="right-side"&gt;
              &lt;div class="right-side nav"&gt;
                  &lt;h3&gt;Recommended Blogs&lt;/h3&gt;
                  &lt;ul id="navi"&gt;
                      &lt;li&gt;empty&lt;/li&gt;
                      &lt;li&gt;empty&lt;/li&gt;
                      &lt;li&gt;empty&lt;/li&gt;
                      &lt;li&gt;empty&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="radar"&gt;
                  &lt;h3&gt;radar&lt;/h3&gt;
                  &lt;ul&gt;
                      &lt;li&gt;empty&lt;/li&gt;
                      &lt;p&gt;
  
                      &lt;/p&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;!-- Post Controls --&gt;
      &lt;div class="controller"&gt;
              &lt;a href="#"&gt;&lt;img src="https://image.freepik.com/free-vector/abstract-summer-sun-logo-   design_1436-184.jpg"&gt;&lt;/a&gt;
              &lt;div class="post-group"&gt;
                  &lt;div class="icons"&gt;
                      &lt;a href="#"&gt;&lt;i class="fas fa-home fa-5x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="icons"&gt;
                      &lt;a href="#"&gt;&lt;i class="far fa-compass fa-5x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="icons"&gt;
                      &lt;a href="#"&gt;&lt;i class="fas fa-envelope fa-5x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="icons"&gt;
                      &lt;a href="#"&gt;&lt;i class="far fa-comment fa-5x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="icons"&gt;
                      &lt;a href="#"&gt;&lt;i class="fas fa-bolt fa-5x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="icons"&gt;
                      &lt;a href="#"&gt;&lt;i class="fas fa-user fa-5x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/*Reset*/
  
  * {
      margin: 0;
      padding: 0;
  }
  
  body {
      background: lightgray;
  }
  
  header {
      padding: 0 10px;
  }
  
  header h1 {
      display: inline;
      margin-right: 15px;
  }
  
  .container {
      width: 60%;
      margin: auto;
      overflow: visible;
  }
  
  div h3 {
    border-bottom: 1px solid black;
  }
  
  /*Header*/
  
  .top-head {
      background: lightblue;
      height: 60px;
      border-bottom: 5px solid black;
      padding: 0px 20px;
  }
  
  
  #top-head-left {
      float: left;
      padding-top: 5px;
  }
  
  #top-head-left input[type="text"] {
      width: 200px;
      background: yellow;
      padding: 5px 0px;
  }
  
  #top-head-right {
      float: right;
      padding-top: 12px;
  }
  /*RightsideBar*/
  
  .right-side {
      float: right;
  }
  
  .nav ul {
      list-style-image: url('https://78.media.tumblr.com/avatar_0f16d6a6a019_128.pnj');
  }
  
  .nav ul li {
  
  }
  
  .radar ul {
      list-style: none;
  }
  /*Post Controller*/
  .controller {
      margin-top: 50px;
  }
  
  
  .controller img {
      width: 10%;
      float: left;
      margin-right: 20px;
      border-radius: 10px;
  }
  
  
  .post-group {
      float: left;
      background: white;
      height: 68px;
      border-radius: 10px;
      padding-top: 8px;
      padding-bottom: 22px;
  }
  
  
  .icons {
      float: left;
  }
  
  .icons a {
      color: orange;
      padding: 0 12px;
  }
  
  /* https://78.media.tumblr.com/avatar_3aed9115be2f_128.pnj
  https://78.media.tumblr.com/avatar_0f16d6a6a019_128.pnj
  https://78.media.tumblr.com/avatar_0f16d6a6a019_128.pnj
  https://78.media.tumblr.com/avatar_996dede0302e_128.pnj */
  </code></pre>