How to add icons to buttons in css: 1. By referencing the font icon file on the page, and then adding the font icon directly to the button; 2. Using the button frame, and then clearing the float through the "overflow:hidden" attribute That’s it.
The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version. This method is suitable for all brands of computers.
Recommendation: "css video tutorial"
Use CSS to create buttons with icons
First, upload a rendering
This is a search button with a small search icon. The CSS written is not very compatible with IE6 and IE7. The rounded corners on the four sides use CSS3 properties.
1. Make small icons with fonts
The search icon above was generated online through the website icomoon. This website is abroad and domestic access is relatively slow. Use a proxy or circumvention tool. It will be faster to go up. The website is as shown below:
#After making a series of selections, click download, and the font file and CSS demo
## will be automatically generated.
#It is very convenient to quote in your own files:@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 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; }
<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 }
<font class="icon_next">筛选</font> .icon_next{ padding:8px 30px; background:#69bda4; border-radius:0 4px 4px 0; float:left }
The above is the detailed content of How to add icon to button in css. For more information, please follow other related articles on the PHP Chinese website!