分享下，簡單幾步，輕松的復(fù)用圖標(biāo)，讓你的自定義頁面更加簡單
很多時候我們會在網(wǎng)頁中通過一些有趣的圖標(biāo)來裝飾我們的頁面，如果只是單純的寫入圖標(biāo)，無論是調(diào)用、復(fù)用以及后續(xù)的修改，在一定程度上都會有難度。
這一次分享下，簡單幾步，輕松的復(fù)用圖標(biāo)，讓你的自定義頁面更加簡單。
例子一
在頁面中我們寫入
HTML
<i class="icon-tg"></i>通過這個代碼來調(diào)用我們的圖標(biāo)
CSS
/*圖標(biāo)*/
.icon-tg::before {
margin: 0;
content: '>';
}通過CSS來展現(xiàn)我們的圖標(biāo)，還可以設(shè)置樣式。
其中content中的內(nèi)容，就是HTML代碼所展示的內(nèi)容。
Demo
我想調(diào)用圖標(biāo)在實(shí)際的運(yùn)用中，我們可以通過HTML代碼來調(diào)用圖標(biāo)，通過CSS來控制圖標(biāo)的形式。
例子二
<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>
