小編給大家分享一下css給按鈕加圖標的方法,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)建站堅持“要么做到,要么別承諾”的工作理念,服務領域包括:成都網(wǎng)站設計、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務,滿足客戶于互聯(lián)網(wǎng)時代的土默特左旗網(wǎng)站設計、移動媒體設計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴!css給按鈕加圖標的方法:1、通過在頁面引用字體圖標文件,然后直接給按鈕添加字體圖標來實現(xiàn);2、使用按鈕框架,然后通過“overflow:hidden”屬性清除浮動即可。
用CSS制作帶圖標的按鈕
先上一張效果圖
這是一個搜索按鈕,帶了一個搜索的小圖標。寫的CSS在IE6和IE7中的兼容性不是很好。四邊的圓角使用了CSS3的屬性。
一、小圖標用字體制作
上面的搜索圖標,我是通過網(wǎng)站icomoon,在線生成的,這個網(wǎng)站在國外,國內(nèi)訪問比較慢,用代理或翻墻工具上去會比較快。網(wǎ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"}
二、按鈕框架
為了簡單方便點,我用了a標簽作為按鈕的最外層
<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標簽中的line-height是用來撐高度的,如果不加會出現(xiàn)下面的情況:
關于line-height的原理介紹,網(wǎng)上有很多材料可以瀏覽,有必要的去了解下的。
2、overflow:hidden是用來清除浮動的。
三、按鈕內(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顯示那條分割線,其余的代碼是在顯示字體圖標。
右邊部分如下:
<font class="icon_next">篩選</font> .icon_next{ padding:8px 30px; background:#69bda4; border-radius:0 4px 4px 0; float:left }
兩部分都用了float浮動,我不太喜歡用這個屬性,但不用就會出現(xiàn)中間有很大的間隔。而且由于font是內(nèi)聯(lián)元素,所以padding-top和padding-bottom無效。
用了浮動后就能讓font變?yōu)閴K級元素,使得padding有效,而且也會讓兩個元素緊緊的挨著,不出現(xiàn)間隔。
在網(wǎng)上有很多關于浮動原理的說明,有必要去了解下的。
以上是“css給按鈕加圖標的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
新聞標題:css給按鈕加圖標的方法-創(chuàng)新互聯(lián)
URL鏈接:http://muchs.cn/article24/cshdce.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、響應式網(wǎng)站、外貿(mào)建站、網(wǎng)站策劃、定制網(wǎng)站、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容