css给按钮加图标的方法

小编给大家分享一下css给按钮加图标的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

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

用CSS制作带图标的按钮

先上一张效果图

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

一、小图标用字体制作

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

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

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

@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有效，而且也会让两个元素紧紧的挨着，不出现间隔。

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

以上是“css给按钮加图标的方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！