CODEWITHSUNDEEP
htmlcss
Shubham Batra
Shubham Batra

Reputation: 2375

how to put img inside circle in html and css?

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>

Upvotes: 3

Views: 20126

Answers (4)

hiDemo Studio
hiDemo Studio

Reputation: 95

I think the container div or i which have a radius and image content should be overflow hidden

i{ 
  overflow:hidden;
}

Upvotes: 0

Zivanovic
Zivanovic

Reputation: 134

You do not need icon element for any purpose. So, you can achieve asked with following HTML:

<li>
  <a href="#" id="circle"></a>
</li>

DEMO: CLICK

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You can do this:

CSS

body{
  background: #f1f1f1;
}

figure{
    display:block;
    width:50px;
    height: 50px;
    border-radius: 50px;
    font-size: 25px;
    text-align: center;
    margin-right: 10px;
    background: #fff;
    line-height: 1.7em;
}

figure img{
   display:inline-block;
   width: 30px;
   height: auto;
}

HTML

<li>
  <a href="#">
    <figure>
      <img src="http://www.pngdot.com/wp-content/uploads/2015/11/Free_Arrow_Png_01.png" alt="image">
    </figure>
  </a>
</li>

DEMO HERE

Upvotes: 2

Mosh Feu
Mosh Feu

Reputation: 29337

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>

Upvotes: 4

Related Questions