How to make a small icon using css?

Question

I am trying to create a small donut hold icon - green.

Here is what I tried :

        .success-icon {
          border: 1px #62ae41 solid;
          border-radius: 10px;
          width: 30px;
          height: 30px;
        }

<div class="col-lg-3"><span class="sucess-icon"> </span>greater than or equal to 75%</div>

I couldn't get it to display. I am not sure what is going on.

Why not use fortawesome.github.io/Font-Awesome/icons , they have a bunch of icons ready to use — Andre Lombaard
– Andre Lombaard, Commented Mar 23, 2015 at 13:20
Just a note, you have a typo in your HTML. You have it currently as <span class="sucess-icon">. — Saad
– Saad, Commented Mar 23, 2015 at 13:22
Good suggestion. Thank You. In term of performance, font-awesome Vs. CSS Vs. small image, which one is the best do you know ? I'm just curious. — code-8
– code-8, Commented Mar 23, 2015 at 13:23

Quentin · Accepted Answer · 2015-03-23 13:21:35Z

3

By default a <span> is display: inline and so height and width do not apply to it.

Set display: inline-block or some other value to which those properties apply.

You also need to make sure you spell your class names consistently or the selector will not match.

        .success-icon {
          border: 1px #62ae41 solid;
          border-radius: 10px;
          width: 30px;
          height: 30px;
          display: inline-block;
        }

<div class="col-lg-3"><span class="success-icon"> </span>greater than or equal to 75%</div>

answered Mar 23, 2015 at 13:21

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohit Rehan · Accepted Answer · 2015-03-23 13:22:28Z

0

use display:inline-block in the style

.success-icon {
    border:1px #62ae41 solid;
    border-radius: 10px;
    width: 30px;
    height: 30px;
    display: inline-block;
}

answered Mar 23, 2015 at 13:22

Rohit Rehan

5701 gold badge4 silver badges19 bronze badges

Comments

Cayce K · Accepted Answer · 2015-03-23 13:29:39Z

0

Here are some extra styles to match it to what you were kinda wanting.

.success-icon {
    border: 8px #62ae41 solid;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    margin: 0 5px 0 0;
    display: inline-block;
    vertical-align: middle;
}
.col-lg-3{
      vertical-align: middle;
}

<div class="col-lg-3"><span class="success-icon"></span>greater than or equal to 75%</div>

answered Mar 23, 2015 at 13:29

Cayce K

2,3281 gold badge27 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to make a small icon using css?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related