圖標的復用 – css筆記

很多時候我們會在網(wǎng)頁中通過一些有趣的圖標來裝飾我們的頁面，如果只是單純的寫入圖標，無論是調(diào)用、復用以及后續(xù)的修改，在一定程度上都會有難度。

這一次分享下，簡單幾步，輕松的復用圖標，讓你的自定義頁面更加簡單。

例子一

在頁面中我們寫入

HTML

<i class="icon-tg"></i>

通過這個代碼來調(diào)用我們的圖標

CSS

/*圖標*/
.icon-tg::before {
  margin: 0;
  content: '>';
}

通過CSS來展現(xiàn)我們的圖標，還可以設(shè)置樣式。

其中content中的內(nèi)容，就是HTML代碼所展示的內(nèi)容。

Demo

我想調(diào)用圖標

在實際的運用中，我們可以通過HTML代碼來調(diào)用圖標，通過CSS來控制圖標的形式。

例子二

<i class="icon-course-1"></i>
  <i class="icon-course-2"></i>
  <i class="icon-course-3"></i>
  <i class="icon-course-4"></i>
  <i class="icon-course-5"></i>
  <i class="icon-course-6"></i>
  
  <style type="text/css">
  [class*=" icon-"]:before, [class^=icon-]:before {
	margin: 0;
	padding: 0.6em;
}
  
  /*1*/
.icon-course-1:before {
    content: 'N';
}
/*2*/
.icon-course-2:before {
    content: 'P';
}
/*3*/
.icon-course-3:before {
    content: 'C';
}
/*4*/
.icon-course-4:before {
    content: 'I';
}
/*5*/
.icon-course-5:before {
    content: 'N';
}

/*6*/
.icon-course-6:before {
    content: 'K';
}

  </style>

Demo

相關(guān)推薦