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"}
二、按钮框架
为了简单方便点，我用了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怎么给按钮加图标的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1616925.html
微信扫一扫 
支付宝扫一扫 
