how to put img inside circle in html and css?


Tags: html,css,css3

Problem :

Image should be inside the circle and circle should have white background.

and Image size should be less than the circle and in center.

I try this:

.icon i {
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  font-size: 25px;
  text-align: center;
  margin-right: 10px;
  padding-top: 15%;
}
<li><a href="#"><i class="icon" style="background: red;"> <img src="http://www.pngdot.com/wp-content/uploads/2015/11/Free_Arrow_Png_01.png"  style="width:50px;height:45px;"></i></a></li>



Solution :

If I understand you correctly can use border-radius for the circle.

body {
  background:#000;  
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

i {
  background: white;
  border-radius: 20px;
  font-size: 25px;
  text-align: center;
  margin-right: 10px;
  border-radius:50%;
  display:inline-block;
  padding:10px;
}

img {
  display:block;
}
<i><img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" width="30" /></i>


    CSS Howto..

    PHP+CSS Obfuscation - PHP ord THEN PHP strrev + CSS reverse text, how to get the special chars validated backwards?

    In IE6, how to implement a:hover?

    How can one pass component property values to the css/less clientlibs for that component? AEM 6.2

    How to add schedule elements into this calendar?

    How can I move a div with direction in JavaScript?

    using the unorthodox `head {display: block}` to show text to user?

    How to center text in lists?

    How to vertical center ordered list-navigation

    How to change text transparency in html/css?

    How to hide navbar when when overlay appears

    How do I format text to wrap onto a second line using bootstrap?

    how to set a div to the bottom side in asp.net css

    how to float the section tags in html5

    How to animate some parts of an image using CSS?

    How to rotate a chart 90 degrees including the text values?

    jQuery show multiple image thumbnail before upload

    How to get CSS left property value on second element of anchor

    How can I fix Buttongroup Dropdowntoggle-Buttons in Bootstrap?

    How to structure table based on Paper size using CSS & PHP?

    How to horizontally and vertically center two images on top of each other?

    How to make marquee when hover in - text scroll and infinite loop, out - back to start position?

    CSS: how to have child1 the same height as child2?

    How to select the second paragraph after another with css?

    how to use CSS opacity to let background bleed through in IE8?

    how to edit the width of menu bar in dreamweaver

    How can I make a fade in function without using jQuery like this? (JavaScript)

    How do I make the cursor stay as a pointer on text using jquery/javascript?

    How to make animation smooth

    How can I style external links like Wikipedia?

    Codeigniter shows views differently when index is removed