react-lz-editor
Version:
An open source react rich-text editor (mordern react editor includes media support such as texts, images, videos, audios, links etc.), development based on Draft-Js and Ant-design, good support html, markdown, draft-raw mode.
701 lines (584 loc) • 28.7 kB
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 markdown">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>
<i class="icon iconfont icon-panorama_time"></i>
<div class="name">日历</div>
<div class="fontclass">.icon-panorama_time</div>
</li>
<li>
<i class="icon iconfont icon-yinyong"></i>
<div class="name">引用</div>
<div class="fontclass">.icon-yinyong</div>
</li>
<li>
<i class="icon iconfont icon-tupian"></i>
<div class="name">图片 </div>
<div class="fontclass">.icon-tupian</div>
</li>
<li>
<i class="icon iconfont icon-shangdian"></i>
<div class="name">商店</div>
<div class="fontclass">.icon-shangdian</div>
</li>
<li>
<i class="icon iconfont icon-yonghuzumingcheng"></i>
<div class="name">用户组名称</div>
<div class="fontclass">.icon-yonghuzumingcheng</div>
</li>
<li>
<i class="icon iconfont icon-panorama_joinuser"></i>
<div class="name">42业务办理情况统计</div>
<div class="fontclass">.icon-panorama_joinuser</div>
</li>
<li>
<i class="icon iconfont icon-panorama_joindevice"></i>
<div class="name">43科室办理情况统计</div>
<div class="fontclass">.icon-panorama_joindevice</div>
</li>
<li>
<i class="icon iconfont icon-shangpin"></i>
<div class="name">商品</div>
<div class="fontclass">.icon-shangpin</div>
</li>
<li>
<i class="icon iconfont icon-hotword"></i>
<div class="name">转化词</div>
<div class="fontclass">.icon-hotword</div>
</li>
<li>
<i class="icon iconfont icon-newsVerify"></i>
<div class="name">订阅</div>
<div class="fontclass">.icon-newsVerify</div>
</li>
<li>
<i class="icon iconfont icon-access_user"></i>
<div class="name">权限_角色</div>
<div class="fontclass">.icon-access_user</div>
</li>
<li>
<i class="icon iconfont icon-sensitiveword"></i>
<div class="name">词-禁</div>
<div class="fontclass">.icon-sensitiveword</div>
</li>
<li>
<i class="icon iconfont icon-xitong"></i>
<div class="name">系统</div>
<div class="fontclass">.icon-xitong</div>
</li>
<li>
<i class="icon iconfont icon-ydh"></i>
<div class="name">高级人才</div>
<div class="fontclass">.icon-ydh</div>
</li>
<li>
<i class="icon iconfont icon-undo"></i>
<div class="name">undo</div>
<div class="fontclass">.icon-undo</div>
</li>
<li>
<i class="icon iconfont icon-h3"></i>
<div class="name">H3</div>
<div class="fontclass">.icon-h3</div>
</li>
<li>
<i class="icon iconfont icon-h21"></i>
<div class="name">H2</div>
<div class="fontclass">.icon-h21</div>
</li>
<li>
<i class="icon iconfont icon-H1"></i>
<div class="name">H1</div>
<div class="fontclass">.icon-H1</div>
</li>
<li>
<i class="icon iconfont icon-dropdown"></i>
<div class="name">下拉</div>
<div class="fontclass">.icon-dropdown</div>
</li>
<li>
<i class="icon iconfont icon-yidianhaoleibie"></i>
<div class="name">分类</div>
<div class="fontclass">.icon-yidianhaoleibie</div>
</li>
<li>
<i class="icon iconfont icon-redo"></i>
<div class="name">redo</div>
<div class="fontclass">.icon-redo</div>
</li>
<li>
<i class="icon iconfont icon-unie60e"></i>
<div class="name">加载</div>
<div class="fontclass">.icon-unie60e</div>
</li>
<li>
<i class="icon iconfont icon-yidianhaowenzhang"></i>
<div class="name">报刊杂志</div>
<div class="fontclass">.icon-yidianhaowenzhang</div>
</li>
<li>
<i class="icon iconfont icon-empty"></i>
<div class="name">清空</div>
<div class="fontclass">.icon-empty</div>
</li>
<li>
<i class="icon iconfont icon-lunbozutu"></i>
<div class="name">轮播组图</div>
<div class="fontclass">.icon-lunbozutu</div>
</li>
<li>
<i class="icon iconfont icon-quanzi"></i>
<div class="name">圈子</div>
<div class="fontclass">.icon-quanzi</div>
</li>
<li>
<i class="icon iconfont icon-recycleNews"></i>
<div class="name">归档</div>
<div class="fontclass">.icon-recycleNews</div>
</li>
<li>
<i class="icon iconfont icon-tiezi"></i>
<div class="name">帖子</div>
<div class="fontclass">.icon-tiezi</div>
</li>
<li>
<i class="icon iconfont icon-unie6672"></i>
<div class="name">uniE6672</div>
<div class="fontclass">.icon-unie6672</div>
</li>
<li>
<i class="icon iconfont icon-untitled22"></i>
<div class="name">untitled22</div>
<div class="fontclass">.icon-untitled22</div>
</li>
<li>
<i class="icon iconfont icon-unie604"></i>
<div class="name">uniE604</div>
<div class="fontclass">.icon-unie604</div>
</li>
<li>
<i class="icon iconfont icon-untitled144"></i>
<div class="name">untitled144</div>
<div class="fontclass">.icon-untitled144</div>
</li>
<li>
<i class="icon iconfont icon-listol"></i>
<div class="name">list-ol</div>
<div class="fontclass">.icon-listol</div>
</li>
<li>
<i class="icon iconfont icon-newsChannel1"></i>
<div class="name">tab-edit-tab</div>
<div class="fontclass">.icon-newsChannel1</div>
</li>
<li>
<i class="icon iconfont icon-score"></i>
<div class="name">积分-17</div>
<div class="fontclass">.icon-score</div>
</li>
<li>
<i class="icon iconfont icon-quanziline"></i>
<div class="name">圈子_line</div>
<div class="fontclass">.icon-quanziline</div>
</li>
<li>
<i class="icon iconfont icon-piliangicon"></i>
<div class="name">日志</div>
<div class="fontclass">.icon-piliangicon</div>
</li>
<li>
<i class="icon iconfont icon-yidianhaotiaomu"></i>
<div class="name">项目-</div>
<div class="fontclass">.icon-yidianhaotiaomu</div>
</li>
<li>
<i class="icon iconfont icon-dianji"></i>
<div class="name">点击</div>
<div class="fontclass">.icon-dianji</div>
</li>
<li>
<i class="icon iconfont icon-fans"></i>
<div class="name">粉丝</div>
<div class="fontclass">.icon-fans</div>
</li>
<li>
<i class="icon iconfont icon-radarchart"></i>
<div class="name">radar chart</div>
<div class="fontclass">.icon-radarchart</div>
</li>
<li>
<i class="icon iconfont icon-huodong"></i>
<div class="name">活动</div>
<div class="fontclass">.icon-huodong</div>
</li>
<li>
<i class="icon iconfont icon-paixu"></i>
<div class="name">list-ol</div>
<div class="fontclass">.icon-paixu</div>
</li>
<li>
<i class="icon iconfont icon-news"></i>
<div class="name">新闻</div>
<div class="fontclass">.icon-news</div>
</li>
<li>
<i class="icon iconfont icon-jiangpai"></i>
<div class="name">奖牌</div>
<div class="fontclass">.icon-jiangpai</div>
</li>
<li>
<i class="icon iconfont icon-quanping"></i>
<div class="name">全屏</div>
<div class="fontclass">.icon-quanping</div>
</li>
<li>
<i class="icon iconfont icon-appclient"></i>
<div class="name">应用客户端设置</div>
<div class="fontclass">.icon-appclient</div>
</li>
<li>
<i class="icon iconfont icon-wenzi01"></i>
<div class="name">文字-01</div>
<div class="fontclass">.icon-wenzi01</div>
</li>
<li>
<i class="icon iconfont icon-neirong"></i>
<div class="name">内容</div>
<div class="fontclass">.icon-neirong</div>
</li>
<li>
<i class="icon iconfont icon-paixu1"></i>
<div class="name">排序</div>
<div class="fontclass">.icon-paixu1</div>
</li>
<li>
<i class="icon iconfont icon-newsComment"></i>
<div class="name">新闻评论回复</div>
<div class="fontclass">.icon-newsComment</div>
</li>
<li>
<i class="icon iconfont icon-bumen"></i>
<div class="name">部门</div>
<div class="fontclass">.icon-bumen</div>
</li>
<li>
<i class="icon iconfont icon-pinpai"></i>
<div class="name">品牌</div>
<div class="fontclass">.icon-pinpai</div>
</li>
<li>
<i class="icon iconfont icon-newsChannel"></i>
<div class="name">tab-unselected</div>
<div class="fontclass">.icon-newsChannel</div>
</li>
<li>
<i class="icon iconfont icon-yonghuxinxixian"></i>
<div class="name">用户信息－线</div>
<div class="fontclass">.icon-yonghuxinxixian</div>
</li>
<li>
<i class="icon iconfont icon-panorama_app"></i>
<div class="name">APP</div>
<div class="fontclass">.icon-panorama_app</div>
</li>
<li>
<i class="icon iconfont icon-panorama_today"></i>
<div class="name">人群－上网时段</div>
<div class="fontclass">.icon-panorama_today</div>
</li>
<li>
<i class="icon iconfont icon-tuisong"></i>
<div class="name">推送</div>
<div class="fontclass">.icon-tuisong</div>
</li>
<li>
<i class="icon iconfont icon-yaochi"></i>
<div class="name">钥匙</div>
<div class="fontclass">.icon-yaochi</div>
</li>
<li>
<i class="icon iconfont icon-gengxinupdated"></i>
<div class="name">更新_updated</div>
<div class="fontclass">.icon-gengxinupdated</div>
</li>
<li>
<i class="icon iconfont icon-panorama_version"></i>
<div class="name">版本</div>
<div class="fontclass">.icon-panorama_version</div>
</li>
<li>
<i class="icon iconfont icon-wochuangjiande"></i>
<div class="name">班级信息修改</div>
<div class="fontclass">.icon-wochuangjiande</div>
</li>
<li>
<i class="icon iconfont icon-ditu-copy-copy"></i>
<div class="name">地图</div>
<div class="fontclass">.icon-ditu-copy-copy</div>
</li>
<li>
<i class="icon iconfont icon-jingxuan-copy"></i>
<div class="name">精选</div>
<div class="fontclass">.icon-jingxuan-copy</div>
</li>
<li>
<i class="icon iconfont icon-yichu"></i>
<div class="name">移除</div>
<div class="fontclass">.icon-yichu</div>
</li>
<li>
<i class="icon iconfont icon-cf-c85"></i>
<div class="name">音频</div>
<div class="fontclass">.icon-cf-c85</div>
</li>
<li>
<i class="icon iconfont icon-panorama_newboot"></i>
<div class="name">join</div>
<div class="fontclass">.icon-panorama_newboot</div>
</li>
<li>
<i class="icon iconfont icon-panorama"></i>
<div class="name">统计</div>
<div class="fontclass">.icon-panorama</div>
</li>
<li>
<i class="icon iconfont icon-panorama_device"></i>
<div class="name">APP</div>
<div class="fontclass">.icon-panorama_device</div>
</li>
<li>
<i class="icon iconfont icon-lunbotuzujian"></i>
<div class="name">轮播图组件</div>
<div class="fontclass">.icon-lunbotuzujian</div>
</li>
<li>
<i class="icon iconfont icon-order"></i>
<div class="name">排序</div>
<div class="fontclass">.icon-order</div>
</li>
<li>
<i class="icon iconfont icon-sort"></i>
<div class="name">排序</div>
<div class="fontclass">.icon-sort</div>
</li>
<li>
<i class="icon iconfont icon-listul"></i>
<div class="name">list-ul</div>
<div class="fontclass">.icon-listul</div>
</li>
<li>
<i class="icon iconfont icon-anquanzhongxin"></i>
<div class="name">安全中心</div>
<div class="fontclass">.icon-anquanzhongxin</div>
</li>
<li>
<i class="icon iconfont icon-zhanghuyuquanxian"></i>
<div class="name">账户与权限</div>
<div class="fontclass">.icon-zhanghuyuquanxian</div>
</li>
<li>
<i class="icon iconfont icon-lianjie"></i>
<div class="name">链接</div>
<div class="fontclass">.icon-lianjie</div>
</li>
<li>
<i class="icon iconfont icon-panorama_action"></i>
<div class="name">活跃数据</div>
<div class="fontclass">.icon-panorama_action</div>
</li>
<li>
<i class="icon iconfont icon-yidianhaoshenhe"></i>
<div class="name">初审</div>
<div class="fontclass">.icon-yidianhaoshenhe</div>
</li>
<li>
<i class="icon iconfont icon-duanluo1"></i>
<div class="name">段落1</div>
<div class="fontclass">.icon-duanluo1</div>
</li>
<li>
<i class="icon iconfont icon-jiaosequanxian0101"></i>
<div class="name">角色权限</div>
<div class="fontclass">.icon-jiaosequanxian0101</div>
</li>
<li>
<i class="icon iconfont icon-centralalignment"></i>
<div class="name">central-alignment</div>
<div class="fontclass">.icon-centralalignment</div>
</li>
<li>
<i class="icon iconfont icon-leftalignment"></i>
<div class="name">left-alignment</div>
<div class="fontclass">.icon-leftalignment</div>
</li>
<li>
<i class="icon iconfont icon-rightalignment"></i>
<div class="name">right-alignment</div>
<div class="fontclass">.icon-rightalignment</div>
</li>
<li>
<i class="icon iconfont icon-shipin"></i>
<div class="name">视频</div>
<div class="fontclass">.icon-shipin</div>
</li>
<li>
<i class="icon iconfont icon-city"></i>
<div class="name">城市</div>
<div class="fontclass">.icon-city</div>
</li>
<li>
<i class="icon iconfont icon-tupian1"></i>
<div class="name">图片</div>
<div class="fontclass">.icon-tupian1</div>
</li>
<li>
<i class="icon iconfont icon-startpage"></i>
<div class="name">手机截屏</div>
<div class="fontclass">.icon-startpage</div>
</li>
<li>
<i class="icon iconfont icon-bold"></i>
<div class="name">加粗</div>
<div class="fontclass">.icon-bold</div>
</li>
<li>
<i class="icon iconfont icon-jiaosesheding"></i>
<div class="name">角色设定</div>
<div class="fontclass">.icon-jiaosesheding</div>
</li>
<li>
<i class="icon iconfont icon-chuangjianjiaose"></i>
<div class="name">创建角色</div>
<div class="fontclass">.icon-chuangjianjiaose</div>
</li>
<li>
<i class="icon iconfont icon-yidianhao"></i>
<div class="name">用户等级</div>
<div class="fontclass">.icon-yidianhao</div>
</li>
<li>
<i class="icon iconfont icon-gongzuoxiang"></i>
<div class="name">工作项</div>
<div class="fontclass">.icon-gongzuoxiang</div>
</li>
<li>
<i class="icon iconfont icon-iconactivitypre"></i>
<div class="name">icon_activity_pre</div>
<div class="fontclass">.icon-iconactivitypre</div>
</li>
<li>
<i class="icon iconfont icon-xietiim"></i>
<div class="name">斜体-im</div>
<div class="fontclass">.icon-xietiim</div>
</li>
<li>
<i class="icon iconfont icon-grab"></i>
<div class="name">获取icon</div>
<div class="fontclass">.icon-grab</div>
</li>
<li>
<i class="icon iconfont icon-draft"></i>
<div class="name">投稿</div>
<div class="fontclass">.icon-draft</div>
</li>
<li>
<i class="icon iconfont icon-caozuowenzi"></i>
<div class="name">操作_文字</div>
<div class="fontclass">.icon-caozuowenzi</div>
</li>
<li>
<i class="icon iconfont icon-centeringalignment"></i>
<div class="name">centering alignment</div>
<div class="fontclass">.icon-centeringalignment</div>
</li>
<li>
<i class="icon iconfont icon-wenbenzhantie"></i>
<div class="name">文本粘贴</div>
<div class="fontclass">.icon-wenbenzhantie</div>
</li>
<li>
<i class="icon iconfont icon-xiahuaxian"></i>
<div class="name">下划线</div>
<div class="fontclass">.icon-xiahuaxian</div>
</li>
<li>
<i class="icon iconfont icon-channelpd-copy"></i>
<div class="name">1频道</div>
<div class="fontclass">.icon-channelpd-copy</div>
</li>
<li>
<i class="icon iconfont icon-bumen-copy"></i>
<div class="name">部门</div>
<div class="fontclass">.icon-bumen-copy</div>
</li>
<li>
<i class="icon iconfont icon-10106-copy"></i>
<div class="name">角色管理</div>
<div class="fontclass">.icon-10106-copy</div>
</li>
<li>
<i class="icon iconfont icon-h4"></i>
<div class="name">H4</div>
<div class="fontclass">.icon-h4</div>
</li>
<li>
<i class="icon iconfont icon-tougao"></i>
<div class="name">投稿</div>
<div class="fontclass">.icon-tougao</div>
</li>
<li>
<i class="icon iconfont icon-updtpwd"></i>
<div class="name">修改密码</div>
<div class="fontclass">.icon-updtpwd</div>
</li>
<li>
<i class="icon iconfont icon-leida"></i>
<div class="name">icon_radar</div>
<div class="fontclass">.icon-leida</div>
</li>
<li>
<i class="icon iconfont icon-duankailianjie"></i>
<div class="name">断开链接</div>
<div class="fontclass">.icon-duankailianjie</div>
</li>
<li>
<i class="icon iconfont icon-xiangpica"></i>
<div class="name">清除样式</div>
<div class="fontclass">.icon-xiangpica</div>
</li>
<li>
<i class="icon iconfont icon-chart-radar"></i>
<div class="name">chart-radar</div>
<div class="fontclass">.icon-chart-radar</div>
</li>
</ul>
<h2 id="font-class-">font-class引用</h2>
<hr>
<p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
<p>与unicode使用方式相比，具有如下特点：</p>
<ul>
<li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
<li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
<li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><link rel="stylesheet" type="text/css" href="./iconfont.css"></span></code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="lang-css hljs"><<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"></<span class="hljs-selector-tag">i</span>></code></pre>
<blockquote>
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
</blockquote>
</div>
</body>
</html>