一套非常实用的html+css实现常用的ICON图标

来源:https://www.sucaihuo.com/js/1820.html 2017-04-25 18:50浏览(4677) 收藏

一套非常实用的html+css实现常用的ICON图标,此资源是去互联网上找资源的时候无意中发现的,经常非常的实现,于是就整理把它分享到JquerySchool网站上了,对做前端的朋友非常有帮助,好好利用哦。。。
一套非常实用的html+css实现常用的ICON图标
分类:html5 难易:
查看演示 下载资源 下载积分: 20 积分

首先引用文件

<link rel="stylesheet" href="style.css" />

各种图标,clearfix以及色调,核心代码js

<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x21;"></div>
		<input type="text" readonly value="&amp;#x21;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x22;"></div>
		<input type="text" readonly value="&amp;#x22;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x23;"></div>
		<input type="text" readonly value="&amp;#x23;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x24;"></div>
		<input type="text" readonly value="&amp;#x24;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x25;"></div>
		<input type="text" readonly value="&amp;#x25;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x26;"></div>
		<input type="text" readonly value="&amp;#x26;" />
	</div>
	<div class="glyph">
		<div class="fs1" aria-hidden="true" data-icon="&#x27;"></div>
		<input type="text" readonly value="&amp;#x27;" />
	</div>
核心代码

document.getElementById("glyphs").addEventListener("click", function(e) {
		var target = e.target;
		if (target.tagName === "INPUT") {
			target.select();
		}
	});
标签: ICON图标
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2