图标的复用 - 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美化

给你的wordpress菜单增添一些特色角标,让你的菜单变得更有特色。
图标的复用 - css笔记-Npcink
图标的复用 - css笔记-Npcink

怎么引用阿里巴巴矢量图标库彩色图标? - wordpress美化

这一次的wordpress美化教程我们就来看看如何使用阿里巴巴矢量图标库里的彩色图标吧。
2020-08-24
css

怎么添加Tooltip提示框? - css笔记

2020-6-30 23:09:51

css

hover选择器设置其它元素 - CSS笔记

2020-9-3 22:19:59

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