css圖標的寫法

html代碼部分

創新互聯2013年開創至今，先為靖西等服務建站，靖西等地企業，進行企業商務咨詢服務。為靖西企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

!doctype html

html

head

meta charset="utf-8"

title圖標寫法/title

/head

body

div id="icon"

span class="price"#65509;89.0/span

a href="#" class="btn"去開團nbsp;gt;/a

/div

/body

/html

下面是css代碼部分,處理了瀏覽器的兼容

style

#icon{display:inline-block;}

.price{display:inline-block; background:#E60012; font-size:40px; color:#fff; float:left; padding:0px 60px; height:86px; line-height:86px; -moz-border-radius-topleft:43px; -moz-border-radius-bottomleft: 43px; -webkit-border-top-left-radius:43px; -webkit-border-bottom-left-radius:43px; border-top-left-radius:43px; border-bottom-left-radius:43px;}

.btn{display:inline-block; background:#000; font-size:40px; color:#fff; text-decoration:none; float:left; padding:0px 60px; height:86px; line-height:86px; -moz-border-radius-topright:43px; -moz-border-radius-bottomright: 43px; -webkit-border-top-right-radius:43px; -webkit-border-bottom-right-radius:43px; border-top-right-radius:43px; border-bottom-right-radius:43px;}

/style

效果圖

html5 css3樣式圖標怎么做

html5 css3樣式圖標制作方法：

1、html代碼：

div id="boxes"

div id="boxShortcode"border-radius: 40px (shortcode)/div

div id="box1"border-top-right-radius: 40px (same on both axis)/div

div id="box2"border-top-right-radius: 20px 40px (x y) /div

div id="box3"border-top-right-radius: 40px 20px (x y) /div

/div

2、css樣式代碼：

#boxes div { margin-bottom: 20px; height: 50px; padding-left: 20px }

#boxShortcode {

background: cyan;

border-radius: 40px;

}

#box1 {

background: red;

border-top-right-radius: 40px;

}

#box2? {

background: yellow;

border-top-right-radius: 20px 40px;

}

#box3 {

background: lime;

border-top-right-radius: 40px 20px;

}

3、運行結果：

這種圖標用css怎么做

可以在阿里圖庫中下載相應的圖標，下到本地后

第一步：拷貝項目下面生成的font-face

@font-face {font-family: 'iconfont';

src: url('iconfont.eot');

src: url('iconfont.eot?#iefix') format('embedded-opentype'),

url('iconfont.woff') format('woff'),

url('iconfont.ttf') format('truetype'),

url('iconfont.svg#iconfont') format('svg');

}

第二步：定義使用iconfont的樣式

.iconfont{

font-family:"iconfont" !important;

font-size:16px;font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;}

第三步：挑選相應圖標并獲取字體編碼，應用于頁面

i class="iconfont"#x33;/i

font-class引用

font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。

與unicode使用方式相比，具有如下特點：

兼容性良好，支持ie8+，及所有現代瀏覽器。

相比于unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什么。

因為使用class來定義圖標，所以當要替換圖標時，只需要修改class里面的unicode引用。

不過因為本質上還是使用的字體，所以多色圖標還是不支持的。

使用步驟如下：

第一步：拷貝項目下面生成的fontclass代碼：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑選相應圖標并獲取類名，應用于頁面：

i class="iconfont icon-xxx"/i