title: how to put img inside circle in html and css?
body: <p>Image should be inside the circle and circle should have white background.</p>
  
  <p>and Image size should be less than the circle and in center.</p>
  
  <p>I try this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.icon i {
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    font-size: 25px;
    text-align: center;
    margin-right: 10px;
    padding-top: 15%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon" style="background: red;"&gt; &lt;img src="http://www.pngdot.com/wp-content/uploads/2015/11/Free_Arrow_Png_01.png"  style="width:50px;height:45px;"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>