自定义字体图标

程中堂 · 发表于 2016-1-28 11:19:58

版本5.3.2
像function文件中定义的这些字体图标的样式集在哪里修改？我想自己定义一些字体样

<item display="solid" label="硬件能力" iconClass="icon-android-lightbulb">

复制代码

Masion · 发表于 2016-1-28 13:01:19

可以参考这个文档

http://wex5.com/cn/%E8%87%AA%E5% ... %E8%AE%BE%E7%BD%AE/

程中堂 · 发表于 2016-1-28 13:05:25

Masion 发表于 2016-1-28 13:01
可以参考这个文档

http://wex5.com/cn/%E8%87%AA%E5%AE%9A%E4%B9%89icons%E7%9A%84%E8%AE%BE%E7%BD%AE/ ...

系统index页面中加载菜单列表的js代码是那块？

Masion · 发表于 2016-1-28 13:15:57

这个是在function.xml文件中配置的如下图所示
捕获.PNG

程中堂 · 发表于 2016-1-28 14:06:51

Masion 发表于 2016-1-28 13:15
这个是在function.xml文件中配置的如下图所示

系统内的图标我看了，我是想加自己做的字体图标，所以需要一级菜单加载js代码块，添加HTML代码

Masion · 发表于 2016-1-28 14:24:23

中堂大人，你是想加载自己做的图片格式的图标？

程中堂 · 发表于 2016-1-28 14:25:56

Masion 发表于 2016-1-28 14:24
中堂大人，你是想加载自己做的图片格式的图标？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont</title>
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
</head>
<body>
<div class="main">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>
<i class="icon iconfont"></i>
<div class="name">刷新</div>
<div class="code">&#xe600;</div>
<div class="fontclass">.shuaxin</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">test</div>
<div class="code">&#xe605;</div>
<div class="fontclass">.test</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">基础台账管理</div>
<div class="code">&#xe606;</div>
<div class="fontclass">.jichutaizhangguanli</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">系统</div>
<div class="code">&#xe602;</div>
<div class="fontclass">.xitong</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">czr_锁</div>
<div class="code">&#xe601;</div>
<div class="fontclass">.suo</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">下</div>
<div class="code">&#xe608;</div>
<div class="fontclass">.chevron-down</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">关闭</div>
<div class="code">&#xe609;</div>
<div class="fontclass">.guanbi</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">刷新</div>
<div class="code">&#xe60a;</div>
<div class="fontclass">.svg27</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">上</div>
<div class="code">&#xe60b;</div>
<div class="fontclass">.arrowup</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">检测报告</div>
<div class="code">&#xe603;</div>
<div class="fontclass">.jiancebaogao</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">用户</div>
<div class="code">&#xe604;</div>
<div class="fontclass">.yonghu</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">溯源管理</div>
<div class="code">&#xe60c;</div>
<div class="fontclass">.iconfontsuyuanguangli</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">工具</div>
<div class="code">&#xe607;</div>
<div class="fontclass">.gongju</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">主页</div>
<div class="code">&#xe612;</div>
<div class="fontclass">.home</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">检查</div>
<div class="code">&#xe610;</div>
<div class="fontclass">.jiancha</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">报表</div>
<div class="code">&#xe60d;</div>
<div class="fontclass">.heilongjiangtubiao03</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">管理</div>
<div class="code">&#xe60e;</div>
<div class="fontclass">.guanli</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">更多</div>
<div class="code">&#xe60f;</div>
<div class="fontclass">.gengduo</div>
</li>
</ul>
<div class="helps">
第一步：使用font-face声明字体
<pre>
@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
<pre>
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
<i class="iconfont">&#x33;</i>
</pre>
</div>
</div>
</body>
</html>

复制代码

jishuang · 发表于 2016-1-28 15:58:57

程中堂发表于 2016-1-28 14:06
系统内的图标我看了，我是想加自己做的字体图标，所以需要一级菜单加载js代码块，添加HTML代码 ...

自定义字体图标参考2楼发的

可以参考css样式的生成

		自动登录	找回密码
密码			注册

[结贴] 自定义字体图标

浏览过的版块