CODEWITHSUNDEEP
cssuser-interfaceiconsfont-awesomecss-shapes
Janji
Janji

Reputation: 27

How to build this icon in CSS only?

I like to build this icon (using Fontawesome) using CSS only. What would be best practice for the CSS? Thanks!

enter image description here

Upvotes: 0

Views: 618

Answers (5)

Persijn
Persijn

Reputation: 14990

SVG

I just have to show you how easily this can be done with svg.
I find svg is the best tool for creating advanced shapes.

<svg wdth="250px" height="250px" viewBox="0 0 100 150">
  <rect x="0" y="0" width="100" height="150" fill="rgb(247,242,234)"></rect>
  <circle cx="50" cy="50" r="50" fill="rgba(125,189,84, 0.3)"></circle>
  <circle cx="50" cy="50" r="40" fill="rgb(125,189,84)"></circle>
  <rect x="30" y="30" rx="5" ry="5" width="40" height="40" stroke-width="5" stroke="white" fill="none"></rect>
  <polyline stroke="rgb(125,189,84)" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" fill="none" points="45,50 55,60 75,35"></polyline>
  <polyline stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none" points="45,50 55,60 75,35"></polyline>
  <text x="50" y="120" text-anchor="middle" style="font-family: fantasy;">Work Orders</text>
</svg>

Upvotes: 6

jbutler483
jbutler483

Reputation: 24559

This is by far a rough design, but shows you how you could make this using css alone.

I have also designed it in such a way that should be scalable, too through the use of vw units as well as % units.

.circle {
  height: 20vw;
  width: 20vw;
  background: green;
  border: 10px solid lightgreen;
  border-radius: 50%;
  position: relative;
}
.square {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40%;
  width: 40%;
  box-sizing: border-box;
  border: 0.5vw solid white;
  border-radius: 5px;
}
.square:before,
.square:after {
  content: "";
  position: absolute;
  background: white;
}
.square:before {
  height: 20%;
  width: 40%;
  top: 50%;
  left: 20%;
  border-radius: 5px 0 5px 5px;
  transform: rotate(45deg);
  z-index: 10;
}
.square:after {
  height: 100%;
  width: 20%;
  top: -8%;
  left: 70%;
  border-radius: 10px 10px 10px 0;
  transform: rotate(45deg);
  border: 5px solid green;
  border-bottom: none;
}
<div class="circle">
  <div class="square"></div>
</div>

Upvotes: 8

CodeRomeos
CodeRomeos

Reputation: 2448

Simplest way to do this is :

Working Example : Jsfiddle

CSS

.circle{
            background:#7dbd54;
            height:150px;
            width:150px;
            border-radius:50%;
            margin:20px auto;
            border:8px solid #B6E896;
            text-align:center;
        }
        .circle .fa-check-square-o{padding-top:30px;color:#fff;}

HTML

 <div class="circle">
    <i class="fa fa-check-square-o fa-5x"></i>
   </div>

Upvotes: 1

Amit singh
Amit singh

Reputation: 2036

Check this snippet..

.box {
  width: 50px;
  height: 50px;
  background-color: #7DBD54;
  border-radius: 50%;
  border: 4px solid #BDDEAA;
  position: relative;
  text-align: center;
}
.box i {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 18px;
  color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<div class="box">
  <i class="fa fa fa-check-square-o"></i>
</div>

Upvotes: 2

razemauze
razemauze

Reputation: 2676

I realize that the colors is not the right greens, but, this is how I would do it.

HTML:

<div>
    <i class="fa fa-check-square-o"></i>
</div>

CSS:

div {
    background:green;
    border-radius:100%;
    border:4px solid limegreen;
    color:white;
}

Upvotes: -1

Related Questions