Css制作小图标

原创 2015年11月18日 10:34:46

在日常的前端中,经常使用一些小图标,如置顶
但是对于一个不会平面设计的人来说,这样是一件很费劲的事情,那么可以使用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>

效果如下:
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

纯CSS制作打勾(√)小图标

  • 2017年08月04日 13:57
  • 1KB
  • 下载

纯CSS制作的打勾(√)小图标

  • 2017年08月04日 14:05
  • 1KB
  • 下载

把所有的小图标一起做成雪碧图吧 请用gulp-css-spriter.

用gulp-css-spriter很简单。 第一步: 在某个文件夹用shitf+鼠标右键   第二步: npm install gulp-css-spriter https:/...

PNG格式小图标的CSS任意颜色赋色技术

一、眼见为实 CSS可以修改图片的颜色,没错,可以,眼见为实!您可以狠狠地点击这里:png小图标CSS赋色demo 上面的不是很黑的是原始图标,是个PNG图片,下面这个是可以赋色的: 下面,...

div+css3做的小图标

今天做了几个小图标 公司以前的小图标都是用图片,闲着没事,用div+css3动手做了几个上代码 第一个: css部分: .menuBur{ width:50px; ...

PNG格式小图标的CSS任意颜色赋色技术

FROM: http://www.zhangxinxu.com/wordpress/2016/06/png-icon-change-color-by-css/ CSS可以修改图片的颜色 ...
  • henrypt
  • henrypt
  • 2016年12月18日 22:41
  • 1787

css sprite网页图片处理之小图标切换

css sprite以前我们经常用css sprite做小图标切换 CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图...

CSS3中用自定义字体实现小图标icon

最近在做一个项目时, 研究了一下新浪微博的前端, 看到首页中那个图标了吗, 以前看到这类效果的第一反应就是用一个gif之类的图标做出来!! 但在研究的过程, 发现了一个小技巧, 注意那个em标签中的...

CSS3实现三角小图标

  • 2016年05月30日 09:35
  • 515B
  • 下载

CSS3小图标分享按钮

  • 2014年06月12日 15:15
  • 100KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Css制作小图标
举报原因:
原因补充:

(最多只允许输入30个字)