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标签作为按钮的最外层
筛选 .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给按钮加图标的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前名称:css给按钮加图标的方法-创新互联
当前链接:http://scyanting.com/article/cshdce.html