图标的复用 - css笔记

20年8月24日

MuzeWordPress爱好者

分享下，简单几步，轻松的复用图标，让你的自定义页面更加简单

很多时候我们会在网页中通过一些有趣的图标来装饰我们的页面，如果只是单纯的写入图标，无论是调用、复用以及后续的修改，在一定程度上都会有难度。

这一次分享下，简单几步，轻松的复用图标，让你的自定义页面更加简单。

例子一

在页面中我们写入

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>