css怎么给按钮加图标?

css怎么给按钮加图标?下面本篇文章给大家介绍一下如何使用CSS制作带图标的按钮?有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

用CSS制作带图标的按钮

先上一张效果图

这是一个搜索按钮,带了一个搜索的小图标。写的CSS在IE6和IE7中的兼容性不是很好。四边的圆角使用了CSS3的属性。

一、小图标用字体制作

上面的搜索图标,我是通过网站icomoon,在线生成的,这个网站在国外,国内访问比较慢,用代理或翻墙工具上去会比较快。网站如下图:

2.png

做好一系列选择后,点击下载,会自动生成字体文件,和CSS的demo

3.png

在自己的文件中引用很方便:

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-fl11l');
    src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'),
        url('fonts/icomoon.woff?-fl11l') format('woff'),
        url('fonts/icomoon.ttf?-fl11l') format('truetype'),
        url('fonts/icomoon.svg?-fl11l#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.ficomoon{font-family:'icomoon';-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.icon-search:before {content: "\e601"}

二、按钮框架

为了简单方便点,我用了a标签作为按钮的最外层

<a href="#" class="btn_green">
        <font class="icon_pre ficomoon icon-search"></font>
        <font class="icon_next">筛选</font>
</a>
.btn_green{
    text-decoration:none;
    display:inline-block;
    color:#fff;
    overflow:hidden;
    vertical-align:middle;
    font-size: 1em;
    line-height: 1.4;
}

1、a标签中的line-height是用来撑高度的,如果不加会出现下面的情况:

  关于line-height的原理介绍,网上有很多材料可以浏览,有必要的去了解下的。

2、overflow:hidden是用来清除浮动的。

三、按钮内容

根据效果图可以看出,按钮分为左右两部分。

左边部分如下:

<font class="icon_pre ficomoon icon-search"></font>
.icon_pre{
    padding:8px 15px;
    border-right:1px solid #c9e7de;
    background:#69bda4;
    border-radius:4px 0 0 4px;
    float:left
}

border-right显示那条分割线,其余的代码是在显示字体图标。

右边部分如下:

<font class="icon_next">筛选</font>
.icon_next{
    padding:8px 30px;
    background:#69bda4;
    border-radius:0 4px 4px 0;
    float:left
}

两部分都用了float浮动,我不太喜欢用这个属性,但不用就会出现中间有很大的间隔。而且由于font是内联元素,所以padding-top和padding-bottom无效。

用了浮动后就能让font变为块级元素,使得padding有效,而且也会让两个元素紧紧的挨着,不出现间隔。

在网上有很多关于浮动原理的说明,有必要去了解下的。

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css怎么给按钮加图标?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏