css怎么给按钮加图标-木庄网络博客

本文摘自PHP中文网，作者藏色散人，侵删。

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

本教程操作环境：Windows7系统、HTML5&&CSS3版本，该方法适用于所有品牌电脑。

推荐：《css视频教程》

用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"}