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>

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

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

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

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

CSS从大图片上截取小图标的使用

注:图片名称(tabicons.png)每个小图标width:18px;height:18px 左上角的坐标为(-0px;-0px) 第一个表示图片的宽 第二个表示图标图片的高 例如第一个对号的坐...
  • fgh2009
  • fgh2009
  • 2015年01月22日 23:24
  • 2373

【CSS】用CSS绘制图标(图标大全)

转载请务必注明出处,也不枉我这么辛苦打上来。谢谢啦! 技艺不精,若有纰漏,还请不吝指出。 暂停按钮 .box{ width: 50px; ...
  • liu_jiachen
  • liu_jiachen
  • 2017年11月25日 21:39
  • 71

在网页中实现icon小图标的几种方法

总所周知,网页的美观程度往往比这个网页的使用程度更重要,因为它能直接吸引用户的眼球。在网页中,小图标在美工方面的作用更是不言而喻,小图标种类多样,给人以直观的反映。在现有的网站中,99.9%的网站都采...
  • u010499087
  • u010499087
  • 2015年01月08日 09:44
  • 20259

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

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

css如何定位大图中的小图标

Document div {width:62px;height:67px;}//定义div的宽高 div{background-image:url(img/pic.jpg);}//定义背景图片...
  • u010046887
  • u010046887
  • 2014年03月30日 15:20
  • 2131

CSS3实现三角小图标

CSS3的transform可以实现页面元素的扭转、变形等功能。 实现如下图所示的三角形小图标只需要transform定义的一行代码即可,无需再使用图片。...
  • u014175572
  • u014175572
  • 2016年05月30日 09:31
  • 3869

小图标制作

京东 淘宝 样式如下:
  • wdzhszyq
  • wdzhszyq
  • 2017年03月15日 17:27
  • 132

如何用css显示一个图片中多个小图标?

CSS显示一个大图片中的多个小图标,主要是用background-position这个属性来控制的。 先看下面这张300*300的大图片,每个小图标是100*100的。(这张图片名字叫9pic2.j...
  • yongshuai185
  • yongshuai185
  • 2017年03月01日 11:16
  • 521

css小图标

div { font-size: 30px; } div:first-child:after...
  • luzhongk
  • luzhongk
  • 2017年10月12日 12:44
  • 68
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Css制作小图标
举报原因:
原因补充:

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