Npcink Blog
切换菜单

图标的复用 - css 笔记

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

最后更新于
本页目录6 节

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

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

例子一

在页面中我们写入

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>

Demo