css圖標的寫法

html代碼部分

為泊頭等地區用戶提供了全套網頁設計制作服務，及泊頭網站建設行業解決方案。主營業務為成都網站建設、成都網站制作、泊頭網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業、用心的態度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

!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

效果圖

html中類似于這樣的class屬性（class="item icon abb"),如何寫它的css樣式，這樣的class屬性有什么作用

簡單點說就是這句html代碼同時擁有名叫item，icon，abb的三個類的樣式，這三個樣式都作用于此html代碼。

從類名稱猜想，item主要控制內容中有關項目的樣式，icon控制有關圖標的樣式，abb應該是增加的特殊的樣式，這樣起類名是符合語義化標準的，看到類名基本能夠猜到控制哪部分樣式，對后期修改也有好處，找指定css即可。尤其在大團隊合作中，這樣規范性更顯得重要。但是就這個具體例子來說，它的類名還需要改進，你可以查閱css語義化標準的相關內容。

寫css樣式時這么寫：

.item {}

.icon {}

.abb {}

這種圖標用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

CSS之字體圖標 icon 的多種實現

什么是icon？讓我們先來看一個例子：

我們以為例子，圖中看到的用圓圈起來的部分都是icon

這個時候你就想問了，這不就是幾張圖片么？

不，它不是圖片，而是文字

什么？？這怎么可能是文字，文字怎么會是這樣的？...

正如你所看到的，現在市面上大多數網頁使用的圖標都是類似這樣的形式，也有不少icon圖標庫可供我們使用

它的實現方式有：

首先我們需要了解：

如何讓頁面展示一個圖標呢？我們可以把圖標當成文字來操作，步驟如下：

下面是具體用法范例，大家可以一試：

或者

CSS Sprites在國內很多人叫css精靈（雪碧圖），是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網絡流行的速度而言，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。

加速的關鍵，不是降低質量，而是減少個數。傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按byte計算。客戶端每顯示一張圖片都會向服務器發送請求。所以，圖片越多請求次數越多，造成延遲的可能性也就越大。

例子：

引用該類 .. 然后在元素中逐一定義背景坐標 .. 以下為關鍵屬性 ..

必須要限定容器大小符合背景圖元素位置 .. 另外 .. XY軸是相對于整張圖片的左上角來算的 .. 所以取值一定要算清楚。

css.icon怎么設置格式

將圖像元素設置為圖標化的等價物：

img

{

content:icon;

icon:url(imgicon.png);

}

定義和用法

icon 屬性為創作者提供了將元素設置為圖標等價物的能力。

注釋：除非 "content" 屬性的值被設置為 "icon"，否則元素的圖標不會被使用。

默認值：

auto

繼承性：

no

版本：

CSS3

JavaScript 語法：

object.style.icon="url(image.png)"

語法

icon: auto|URL|inherit;

值

描述

auto 使用由瀏覽器提供的默認通用圖標。

URL 引用列表中的一個或多個圖標，列表用逗號分隔。

inherit 規定應從元素繼承 icon 屬性的值。

阿里云icon圖標怎么放在css樣式文件里

先把圖標放到購物車里，然后點擊下載資料，在下載的壓縮包里有使用示例。

當前題目：iconcss樣式,icon css
分享路徑：http://www.yijiale78.com/article38/dsgoosp.html

成都網站建設公司_創新互聯，為您提供、服務器托管、App設計、網站內鏈、網站營銷、標簽優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯