Css制作小图标

在日常的前端中，经常使用一些小图标，如
但是对于一个不会平面设计的人来说，这样是一件很费劲的事情，那么可以使用css实现类似的图标
如：

    .tag-red {        color: #fff;        display: inline-block;        font-size: 10px;        font-weight: 400;        height: 17px;        line-height: 17px;        margin-right: 0;        padding: 0 3px;        text-align: center;        background-color: #d33556;    }        .tag-blue {        color: #fff;        display: inline-block;        font-size: 10px;        font-weight: 300;        height: 17px;        line-height: 17px;        padding: 0 3px;        text-align: center;        background-color: #258ee7;    }

         <a class="tag-red" href="#" target="_blank">置顶</a>         <a class="tag-blue" href="#" target="_blank">置顶</a>

效果如下：