字体图标素材集 Unicode字符设置可改变大小ico网页图标

2017-08-23 22:56:25 网站网页中常用图标素材,ico素材库。不用img引入,而是直接用Unicode字符字体即可引入设置图标,同时可以改变图标大小,颜色等效果。

网站网页中常用图标素材,ico素材库,可改变ico图标大小、图标颜色等CSS样式。不用图片标签img引入图标,而是直接用Unicode字符代码即可引入设置图标,同时可以使用CSS再次改变图标大小,颜色等效果。

图标ico效果
图标素材效果

通过对对象设置(div span等元素 一般推荐用 i标签)设定 class="layui-icon",来定义一个图标,然后对元素加上图标对应的 Unicode字符,即可显示出你想要的图标,譬如:

一、Unicode图标效果

 主页  设置
 设置

Unicode图标代码(用法介绍)
<i class="layui-icon">&#xe68e; 主页</i> <i class="layui-icon">&#xe620; 设置</i>
<br />
<i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe620; 设置</i>

从以上引入ico图标素材,同时使用style属性可以单独设置字体大小,从而设置图标大小,也可以设置字体颜色来改变图标ICO颜色。

二、成功使用的前提条件与说明教程

要使用需要引入layui框架库!

以上网页图标图片使用,采用了Unicode字符字母代码设置引入图标,而非使用img标签引入图片图标素材。同时这些图标资源应用是基于layui 前端框架的,也就是要下载layui并html引入css文件后才会生效。

使用说明与项目使用步骤:
1、下载layui压缩包;
2、解压后,将文件夹内”layui“文件夹整体拷贝入当前项目;
3、html引入layui.css(注意路径正确);
4、拷贝需要效果HTML代码(和JS)即可完成使用应用。

项目 操作 备注
框架 layui

立即下载layui(531.64KB

引入CSS 需要 <link rel="stylesheet" href="layui/css/layui.css" media="all">
引入JS 不需要 此网页布局不用html引入JS库
layui教程 layui使用教程 layui教程地址

三、layui 提供119个图标效果与对应Unicode代码库

  • 主页
    &#xe68e;
  • &#xe6c6;
  • &#xe6c5;
  • &#xe662;
  • &#xe661;
  • 相机-空心
    &#xe660;
  • 相机-实心
    &#xe65d;
  • 菜单-水平
    &#xe65f;
  • 菜单-竖直
    &#xe671;
  • 返回
    &#xe65c;
  • Hot
    &#xe756;
  • 等级
    &#xe735;
  • 金额-人民币
    &#xe65e;
  • 金额-美元
    &#xe659;
  • 位置
    &#xe715;
  • 文档
    &#xe705;
  • 检验
    &#xe6b2;
  • 笑脸
    &#xe6af;
  • 哭脸
    &#xe69c;
  • 购物车1
    &#xe698;
  • 购物车2
    &#xe657;
  • 星级
    &#xe658;
  • 上一页
    &#xe65a;
  • 下一页
    &#xe65b;
  • 上传-空心
    &#xe681;
  • 上传-实心
    &#xe67c;
  • 文件夹
    &#xe7a0;
  • 应用
    &#xe857;
  • 播放
    &#xe652;
  • 播放暂停
    &#xe651;
  • 音乐
    &#xe6fc;
  • 视频
    &#xe6ed;
  • 语音
    &#xe688;
  • 喇叭
    &#xe645;
  • 对话
    &#xe611;
    .duihua
  • 设置
    &#xe614;
    .shezhi
  • 隐身-im
    &#xe60f;
    .yinshenim
  • 搜索
    &#xe615;
    .search
  • 分享
    &#xe641;
    .fenxiang1
  • 刷新
    &#x1002;
  • loading
    &#xe63d;
  • loading
    &#xe63e;
  • 设置
    &#xe620;
    .shezhi1
  • 引擎
    &#xe628;
    .yinqing
  • 阅卷错号
    &#x1006;
    .yuejuancuohao
  • 错-
    &#x1007;
    .cuo
  • 报表
    &#xe629;
    .baobiao
  • star
    &#xe600;
    .star
  • 圆点
    &#xe617;
    .yuandian
  • 客服
    &#xe606;
    .kefu
  • 发布
    &#xe609;
    .logo
  • 21cake_list
    &#xe60a;
    .list
  • 图表
    &#xe62c;
    .tubiao
  • 正确
    &#x1005;
    .right
  • 换肤2
    &#xe61b;
    .huanfu2
  • 在线
    &#xe610;
    .On-line
  • 右右
    &#xe602;
    .youyou
  • 左左
    &#xe603;
    .zuozuo
  • 表格
    &#xe62d;
  • icon_树
    &#xe62e;
    .icon5
  • 上传
    &#xe62f;
    .iconfont17
  • 添加
    &#xe61f;
    .tianjia
  • 下载
    &#xe601;
    .xiazai
  • 选择模版48
    &#xe630;
    .xuanzemoban48
  • 工具
    &#xe631;
    .gongju
  • 添加
    &#xe654;
  • 编辑
    &#xe642;
  • 删除
    &#xe640;
  • 向下
    &#xe61a;
    .xiangxia
  • 文件
    &#xe621;
    .wenjian
  • 布局
    &#xe632;
    .layouts
  • 对勾
    &#xe618;
    .duigou
  • 添加
    &#xe608;
    .tianjia1
  • 么么直播-翻页
    &#xe633;
    .yaoyaozhibofanye
  • 404
    &#xe61c;
    .404
  • 轮播组图
    &#xe634;
    .lunbozutu
  • help
    &#xe607;
    .help
  • 代码1
    &#xe635;
    .daima1
  • 进水
    &#xe636;
    .jinshui
  • 关于
    &#xe60b;
    .guanyu
  • 向上
    &#xe619;
    .xiangshang
  • 日期
    &#xe637;
    .riqi
  • 文件
    &#xe61d;
    .wenjian1
  • top
    &#xe604;
    .top
  • 好友请求
    &#xe612;
    .haoyouqingqiu
  • &#xe605;
    .weibiaoti1
  • 窗口
    &#xe638;
    .chuangkou
  • 表情
    &#xe60c;
    .comiisbiaoqing
  • 正确
    &#xe616;
    .zhengque
  • 我的好友
    &#xe613;
    .iconfontwodehaoyou
  • 文件下载
    &#xe61e;
    .wenjianxiazai
  • 图片
    &#xe60d;
    .tupian
  • 链接
    &#xe64c;
    .lianjie
  • 记录
    &#xe60e;
    .jilu
  • 文件夹
    &#xe622;
    .liucheng
  • font-strikethrough
    &#xe64f;
    .fontstrikethrough
  • unlink
    &#xe64d;
    .unlink
  • 编辑_文字
    &#xe639;
    .bianjiwenzi
  • 三角
    &#xe623;
    .sanjiao
  • 单选框-候选
    &#xe63f;
    .danxuankuanghouxuan
  • 单选框-选中
    &#xe643;
    .danxuankuangxuanzhong
  • 居中对齐
    &#xe647;
    .juzhongduiqi
  • 右对齐
    &#xe648;
    .youduiqi
  • 左对齐
    &#xe649;
    .zuoduiqi
  • 勾选框(未打勾)
    &#xe626;
    .gongsisvgtubiaozongji22
  • 勾选框(已打勾)
    &#xe627;
    .gongsisvgtubiaozongji23
  • 加粗
    &#xe62b;
    .jiacu
  • 聊天 对话 IM 沟通
    &#xe63a;
    .liaotianduihuaimgoutong
  • 文件夹_反
    &#xe624;
    .wenjianjiafan
  • 手机
    &#xe63b;
    .shouji
  • 表情
    &#xe650;
    .biaoqing
  • html
    &#xe64b;
    .html
  • 表单
    &#xe63c;
    .biaodan
  • tab
    &#xe62a;
    .25
  • emw_代码
    &#xe64e;
    .emwdaima
  • 字体-下划线
    &#xe646;
    .zitixiahuaxian
  • 三角
    &#xe625;
    .sanjiao1
  • 图片
    &#xe64a;
    .tupian-copy-copy
  • 斜体
    &#xe644;
    .xieti

使用字需要将图标字符代码放入设置class="layui-icon"的盒子内即可如(<i class="layui-icon">&#xe647;</i>),红色代码部分就是图标代码字符。

特点:图标使用基于layui框架,图标可通过设置字体样式而改变图标大小,改变图标颜色。应用ico、按钮图标、功能菜单图标等。

图标与按钮结合扩展应用:css图标按钮

更新