2017-08-23 22:56:25 网站网页中常用图标素材,ico素材库。不用img引入,而是直接用Unicode字符字体即可引入设置图标,同时可以改变图标大小,颜色等效果。
网站网页中常用图标素材,ico素材库,可改变ico图标大小、图标颜色等CSS样式。不用图片标签img引入图标,而是直接用Unicode字符代码即可引入设置图标,同时可以使用CSS再次改变图标大小,颜色等效果。
图标素材效果
通过对对象设置(div span等元素 一般推荐用 i标签)设定 class="layui-icon",来定义一个图标,然后对元素加上图标对应的 Unicode字符,即可显示出你想要的图标,譬如:
一、Unicode图标效果
主页 设置
设置
<i class="layui-icon"> 主页</i> <i class="layui-icon"> 设置</i>
<br />
<i class="layui-icon" style="font-size: 30px; color: #1E9FFF;"> 设置</i>
从以上引入ico图标素材,同时使用style属性可以单独设置字体大小,从而设置图标大小,也可以设置字体颜色来改变图标ICO颜色。
二、成功使用的前提条件与说明教程
要使用需要引入layui框架库!
以上网页图标图片使用,采用了Unicode字符字母代码设置引入图标,而非使用img标签引入图片图标素材。同时这些图标资源应用是基于layui 前端框架的,也就是要下载layui并html引入css文件后才会生效。
使用说明与项目使用步骤:
1、下载layui压缩包;
2、解压后,将文件夹内”layui“文件夹整体拷贝入当前项目;
3、html引入layui.css(注意路径正确);
4、拷贝需要效果HTML代码(和JS)即可完成使用应用。
三、layui 提供119个图标效果与对应Unicode代码库
-
主页

-
赞

-
踩

-
男

-
女

-
相机-空心

-
相机-实心

-
菜单-水平

-
菜单-竖直

-
返回

-
Hot

-
等级

-
金额-人民币

-
金额-美元

-
位置

-
文档

-
检验

-
笑脸

-
哭脸

-
购物车1

-
购物车2

-
星级

-
上一页

-
下一页

-
上传-空心

-
上传-实心

-
文件夹

-
应用

-
播放

-
播放暂停

-
音乐

-
视频

-
语音

-
喇叭

-
对话

.duihua
-
设置

.shezhi
-
隐身-im

.yinshenim
-
搜索

.search
-
分享

.fenxiang1
-
ဂ
刷新
ဂ
-
loading

-
loading

-
设置

.shezhi1
-
引擎

.yinqing
-
ဆ
阅卷错号
ဆ
.yuejuancuohao
-
ဇ
错-
ဇ
.cuo
-
报表

.baobiao
-
star

.star
-
圆点

.yuandian
-
客服

.kefu
-
发布

.logo
-
21cake_list

.list
-
图表

.tubiao
-
စ
正确
စ
.right
-
换肤2

.huanfu2
-
在线

.On-line
-
右右

.youyou
-
左左

.zuozuo
-
表格

-
icon_树

.icon5
-
上传

.iconfont17
-
添加

.tianjia
-
下载

.xiazai
-
选择模版48

.xuanzemoban48
-
工具

.gongju
-
添加

-
编辑

-
删除

-
向下

.xiangxia
-
文件

.wenjian
-
布局

.layouts
-
对勾

.duigou
-
添加

.tianjia1
-
么么直播-翻页

.yaoyaozhibofanye
-
404

.404
-
轮播组图

.lunbozutu
-
help

.help
-
代码1

.daima1
-
进水

.jinshui
-
关于

.guanyu
-
向上

.xiangshang
-
日期

.riqi
-
文件

.wenjian1
-
top

.top
-
好友请求

.haoyouqingqiu
-
对

.weibiaoti1
-
窗口

.chuangkou
-
表情

.comiisbiaoqing
-
正确

.zhengque
-
我的好友

.iconfontwodehaoyou
-
文件下载

.wenjianxiazai
-
图片

.tupian
-
链接

.lianjie
-
记录

.jilu
-
文件夹

.liucheng
-
font-strikethrough

.fontstrikethrough
-
unlink

.unlink
-
编辑_文字

.bianjiwenzi
-
三角

.sanjiao
-
单选框-候选

.danxuankuanghouxuan
-
单选框-选中

.danxuankuangxuanzhong
-
居中对齐

.juzhongduiqi
-
右对齐

.youduiqi
-
左对齐

.zuoduiqi
-
勾选框(未打勾)

.gongsisvgtubiaozongji22
-
勾选框(已打勾)

.gongsisvgtubiaozongji23
-
加粗

.jiacu
-
聊天 对话 IM 沟通

.liaotianduihuaimgoutong
-
文件夹_反

.wenjianjiafan
-
手机

.shouji
-
表情

.biaoqing
-
html

.html
-
表单

.biaodan
-
tab

.25
-
emw_代码

.emwdaima
-
字体-下划线

.zitixiahuaxian
-
三角

.sanjiao1
-
图片

.tupian-copy-copy
-
斜体

.xieti
使用字需要将图标字符代码放入设置class="layui-icon"的盒子内即可如(<i class="layui-icon"></i>),红色代码部分就是图标代码字符。
特点:图标使用基于layui框架,图标可通过设置字体样式而改变图标大小,改变图标颜色。应用ico、按钮图标、功能菜单图标等。
图标与按钮结合扩展应用:css图标按钮