图标的复用 - css笔记

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

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

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

例子一

在页面中我们写入

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

相关推荐

图标的复用 - css笔记-Npcink
图标的复用 - css笔记-Npcink

怎么给菜单添加角标? - WordPress美化

图标的复用 - css笔记-Npcink
图标的复用 - css笔记-Npcink

怎么引用阿里巴巴矢量图标库彩色图标? - WordPress教程

wordpress footer.php 中 wp_footer 的作用

2019-1-13 23:59:55

Typecho

Typecho教程 - 如何开启伪静态并隐藏index.php?

2020-3-20 3:21:26

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索