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