css怎么给按钮加图标

css给按钮加图标的方法：1、通过在页面引用字体图标文件，然后直接给按钮添加字体图标来实现；2、使用按钮框架，然后通过“overflow:hidden”属性清除浮动即可。

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

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

二、按钮框架

为了简单方便点，我用了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是用来清除浮动的。

三、按钮内容

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

左边部分如下：

.icon_pre{
    padding:8px 15px;
    border-right:1px solid #c9e7de;
    background:#69bda4;
    border-radius:4px 0 0 4px;
    float:left
}

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

右边部分如下：

筛选
.icon_next{
    padding:8px 30px;
    background:#69bda4;
    border-radius:0 4px 4px 0;
    float:left
}

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

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

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

以上就是css怎么给按钮加图标的详细内容，更多请关注其它相关文章！