小編給大家分享一下css給按鈕加圖標(biāo)的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專(zhuān)業(yè)從事企業(yè)網(wǎng)站建設(shè)和網(wǎng)站設(shè)計(jì)服務(wù)，包括網(wǎng)站建設(shè)、空間域名、虛擬主機(jī)、企業(yè)郵箱、微信公眾號(hào)開(kāi)發(fā)、微信支付寶微信小程序、app軟件開(kāi)發(fā)、軟件開(kāi)發(fā)、等服務(wù)。公司始終通過(guò)不懈的努力和以更高的目標(biāo)來(lái)要求自己,在不斷完善自身管理模式和提高技術(shù)研發(fā)能力的同時(shí)，大力倡導(dǎo)推行新經(jīng)濟(jì)品牌戰(zhàn)略，促進(jìn)互聯(lián)網(wǎng)事業(yè)的發(fā)展。

css給按鈕加圖標(biāo)的方法：1、通過(guò)在頁(yè)面引用字體圖標(biāo)文件，然后直接給按鈕添加字體圖標(biāo)來(lái)實(shí)現(xiàn)；2、使用按鈕框架，然后通過(guò)“overflow:hidden”屬性清除浮動(dòng)即可。

用CSS制作帶圖標(biāo)的按鈕

先上一張效果圖

這是一個(gè)搜索按鈕，帶了一個(gè)搜索的小圖標(biāo)。寫(xiě)的CSS在IE6和IE7中的兼容性不是很好。四邊的圓角使用了CSS3的屬性。

一、小圖標(biāo)用字體制作

上面的搜索圖標(biāo)，我是通過(guò)網(wǎng)站icomoon，在線(xiàn)生成的，這個(gè)網(wǎng)站在國(guó)外，國(guó)內(nèi)訪(fǎng)問(wèn)比較慢，用代理或翻墻工具上去會(huì)比較快。網(wǎng)站如下圖：

做好一系列選擇后，點(diǎn)擊下載，會(huì)自動(dòng)生成字體文件，和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"}

二、按鈕框架

為了簡(jiǎn)單方便點(diǎn)，我用了a標(biāo)簽作為按鈕的最外層

<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、a標(biāo)簽中的line-height是用來(lái)?yè)胃叨鹊模绻患訒?huì)出現(xiàn)下面的情況：

關(guān)于line-height的原理介紹，網(wǎng)上有很多材料可以瀏覽，有必要的去了解下的。

2、overflow:hidden是用來(lái)清除浮動(dòng)的。

三、按鈕內(nèi)容

根據(jù)效果圖可以看出，按鈕分為左右兩部分。

左邊部分如下：

<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顯示那條分割線(xiàn)，其余的代碼是在顯示字體圖標(biāo)。

右邊部分如下：

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

兩部分都用了float浮動(dòng)，我不太喜歡用這個(gè)屬性，但不用就會(huì)出現(xiàn)中間有很大的間隔。而且由于font是內(nèi)聯(lián)元素，所以padding-top和padding-bottom無(wú)效。

用了浮動(dòng)后就能讓font變?yōu)閴K級(jí)元素，使得padding有效，而且也會(huì)讓兩個(gè)元素緊緊的挨著，不出現(xiàn)間隔。

在網(wǎng)上有很多關(guān)于浮動(dòng)原理的說(shuō)明，有必要去了解下的。

以上是“css給按鈕加圖標(biāo)的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：css給按鈕加圖標(biāo)的方法
文章網(wǎng)址：http://www.chinadenli.net/article36/jiihsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、搜索引擎優(yōu)化、自適應(yīng)網(wǎng)站、Google、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)