How to add icon to button in css

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

2. Button frame

For simplicity and convenience, I used the a tag as the outermost layer of the button

<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. The line-height in the a tag is used to support the height. If it is not added, the following situation will occur:

Introduction to the principle of line-height , there is a lot of material to browse online, learn about it if necessary.

2. overflow:hidden is used to clear floats.

3. Button content

As can be seen from the renderings, the button is divided into left and right parts.

The left part is as follows:

<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 displays the dividing line, and the rest of the code displays the font icon.

The right part is as follows:

<font class="icon_next">筛选</font>
.icon_next{
    padding:8px 30px;
    background:#69bda4;
    border-radius:0 4px 4px 0;
    float:left
}

Both parts use float. I don’t like to use this attribute, but if I don’t use it, there will be a big gap in the middle. And since font is an inline element, padding-top and padding-bottom are invalid.

After using float, the font can be changed into a block-level element, making padding effective, and also making the two elements closely next to each other without any gap.

There are many explanations about the floating principle on the Internet, and it is necessary to understand them.

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!