技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

512個(gè)CSS圖標(biāo)形狀(icon shape)【收藏】

作者:admin    時(shí)間:2021-6-26 15:26:58    瀏覽:

我之前介紹過(guò)44個(gè)CSS3制作的形狀圖形(shape),和130個(gè)純CSS3圖標(biāo)(CSS icons),本文將給大家介紹512個(gè)CSS圖標(biāo)形狀(icon shape),無(wú)需用到第三方文件,遷移使用起來(lái)相當(dāng)方便。

512個(gè)CSS圖標(biāo)形狀(icon shape)

demodownload

使用介紹

首先引用CSS文件,該文件在下載壓縮包里。

<link rel="stylesheet" href="style.css">

如需要顯示一個(gè)搜索圖標(biāo),那么HTML代碼就是:

<div class="search icon"></div>

其對(duì)應(yīng)的CSS代碼是這樣的(可在css文件里找到):

.search.icon {
  margin-top: 2px;
  margin-left: 3px;
  width: 12px;
  height: 12px;
  border: solid 1px #333333;
  border-radius: 100%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); 
}
.search.icon:before {
  top: 12px;
  left: 5px;
  height: 6px;
  width: 1px;
  background-color: #333333; 
}

通過(guò)修改CSS代碼里的高(height)、寬(width)、位置(top、left)等數(shù)值,可以更改圖標(biāo)的大小。

本文介紹的CSS圖標(biāo)一共多達(dá)512個(gè),值得收藏。

相關(guān)文章推薦

標(biāo)簽: css  css3  shape  形狀圖形  CSS圖標(biāo)  css-icon  
x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */