demo_unicode.html

最新推荐文章于 2024-02-03 17:58:39 发布
最新推荐文章于 2024-02-03 17:58:39 发布
阅读量360 收藏
点赞数
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mikibiubiu/article/details/104460908
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">

    <style type="text/css">

        @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- */
        }

        .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;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xe60d;</i>
                    <div class="name">刷新</div>
                    <div class="code">&amp;#xe60d;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe600;</i>
                    <div class="name">数据库</div>
                    <div class="code">&amp;#xe600;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe601;</i>
                    <div class="name">删除</div>
                    <div class="code">&amp;#xe601;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe602;</i>
                    <div class="name">文章</div>
                    <div class="code">&amp;#xe602;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60c;</i>
                    <div class="name">链接</div>
                    <div class="code">&amp;#xe60c;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60e;</i>
                    <div class="name">菜单</div>
                    <div class="code">&amp;#xe60e;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe603;</i>
                    <div class="name">邮件</div>
                    <div class="code">&amp;#xe603;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe604;</i>
                    <div class="name">推荐</div>
                    <div class="code">&amp;#xe604;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe605;</i>
                    <div class="name">评论 </div>
                    <div class="code">&amp;#xe605;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe606;</i>
                    <div class="name">头像</div>
                    <div class="code">&amp;#xe606;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe607;</i>
                    <div class="name">类目链接</div>
                    <div class="code">&amp;#xe607;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe608;</i>
                    <div class="name">名单</div>
                    <div class="code">&amp;#xe608;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe609;</i>
                    <div class="name">提醒</div>
                    <div class="code">&amp;#xe609;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60a;</i>
                    <div class="name">密码</div>
                    <div class="code">&amp;#xe60a;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60b;</i>
                    <div class="name">设置</div>
                    <div class="code">&amp;#xe60b;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe628;</i>
                    <div class="name">上升</div>
                    <div class="code">&amp;#xe628;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe639;</i>
                    <div class="name">发件箱</div>
                    <div class="code">&amp;#xe639;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60f;</i>
                    <div class="name">上升</div>
                    <div class="code">&amp;#xe60f;</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe656;</i>
                    <div class="name">排序</div>
                    <div class="code">&amp;#xe656;</div>
                </li>
            
        </ul>
        <h2 id="unicode-">unicode引用</h2>
        <hr>

        <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
        <ul>
        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
        </ul>
        <blockquote>
        <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
        </blockquote>
        <p>unicode使用步骤如下：</p>
        <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
        <pre><code class="lang-js hljs javascript">@font-face {
  font-family: <span class="hljs-string">'iconfont'</span>;
  src: url(<span class="hljs-string">'iconfont.eot'</span>);
  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
}
</code></pre>
        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
        <pre><code class="lang-js hljs javascript">.iconfont{
  font-family:<span class="hljs-string">"iconfont"</span> !important;
  font-size:<span class="hljs-number">16</span>px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>

        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
mikibiubiu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手把手分析 lv_config.h 文件
少年一贯快马扬帆，道阻且长不转弯； 要盛大，要绚烂，要哗然； 要用理想的泰坦尼克，去撞现实的冰川； 要当烧赤壁的风，而非借鉴草船； 要为了一片海，就肯翻万山。
09-23 612
如果设置为 1，表示启用全局自定义功能。如果启用全局自定义功能 (LV_ENABLE_GLOBAL_CUSTOM == 1)，可以配置以下选项：LV_GLOBAL_CUSTOM_INCLUDE 宏定义了用于全局自定义函数的头文件路径。在这里，它包括了 头文件，这是 C 标准库的头文件，用于定义整数类型。LV_CACHE_DEF_SIZE 宏定义了。
【python自动化办公】PysimpleGUI官网案例全部项目代码文件及运行截图
lys_828的博客
08-18 536
对pysimegui官网中的案例项目进行运行展示，进行逐个文件的运行与结果截图展示，共342个项目
IconFont图标库
weixin_46822367的博客
05-29 3163
图标库 <!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&gt
后台常用图标，代码大全
08-21 5325
后台常用图标，代码大全
html %3cp%3e字体斜体,icon.html
weixin_34024811的博客
06-03 1241
Simple - 简！ 首页基础框架组件库页面库色彩排版按钮徽标导航面包屑表格表单面板进度条图标前台空页面后台空页面辅助类图标·iconfont图标，展示，装饰Layui内置图标一览表(140个)半星&#xe6c9;layui-icon-rate-half星星-空心&#xe67b;layui-icon-rate星星-实心&#xe67a;layui-i...
《layui宇宙版教程》：按钮
来吧，学习！
08-16 621
1.7 按钮 向任意HTML元素设置class="layui-btn"来创建一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成多种按钮风格。 1.7.1 用法 测试代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><...
layui页面元素使用（一）
Andy_lau
05-31 3万+
目录：     1.页面元素控件的清单     2.每个控件的使用方法     1.页面元素控件的清单       2.每个控件的使用方法     2.1 字体图标            1） 在内链元素中设置 class="layui-icon" 然后设置图标的Unicode编码即可显示图标，图标的颜色和大小设置方法和css设置字体
html在母版页中布局,MVC母版页_Layout.cshtml
weixin_30045135的博客
06-22 685
记得在asp.net时候，我们常会使用母版页MasterPage。而在MVC也有此功能，应用起来比MasterPage更加便捷。在本次练习之前，所有MVC的练习均是创建单独的网页。Insus.NET就想拿以前的练习的例子，移迁至母版页中去。在ASP.NET时，如果想把已经写好的单独一个网页放入MasterPage母版页中，凭Insus.NET的经验时，那得重新创建，然后把相关内容拷贝至新建的网页中...
Demo_bidi-0.1.15.rar_DEMO_bidi
09-24
例如，在HTML或CSS中，可以使用BIDI属性如`dir`或`unicode-bidi`来控制文本方向。 2. **Fribidi库**：Fribidi是一个遵循Unicode BiDi算法的开源库，用于计算和应用双向文本的显示顺序。这个库可以被各种编程语言的...
lvgl_conf.h
最新发布
k_daxia的博客
02-03 801
/** * @file lv_conf.h * Configuration file for v9.0.0 */ /* * Copy this file as `lv_conf.h` * 1. simply next to the `lvgl` folder * 2. or any other places and * - define `LV_CONF_INCLUDE_SIMPLE` * - add the path as include path */ /* *将此文件
C#使用IconFont字体图标的动态加载（＆#xe格式转换）
MaFeng
12-04 1万+
IconFont 矢量字体图标由于文件小，资源多，可任意放大缩小不失真，方便着色等特点，在网页、Winform、WPF中被广泛使得。网页上介绍使用的文件很多，但动态加载并不多,本文将重点介绍利用C#语言动态加载IconFont 字体，以便显示矢量字体图标。 一、IConFont 基本使用参考 下面两遍文章介绍很详细，相关链接如下： 将IconFont的字体图标库转为图片 WPF自定义控件与样式(......
&#x(unicode编码后的汉字)JS转换方法
minixu的博客
11-09 1万+
1.&#x转汉字 unescape("&#x5927;&#x5927;".replace(/&#x/g,'%u').replace(/;/g,'')) 2.汉字转&#x "大大".replace(/[^\u0000-\u00FF]/g,function(a){return escape(a).replace(/(%u)(\w{4})/gi,"&#x$2;")})
iconfont代替png图片
u013708985的专栏
12-06 1998
步骤： 1。 在iconfont将需要的iconfont加入购物车，再把购物车中的iconfont生成iconfont.ttf文件保存到本地，放入res/assets/fonts文件夹下面 2。 获得各个iconfont对应的编号，再values文件夹下的strings.xml文件中定义，如： <string name="iconfont_paint">&#xe603;</string>
layim之整合右键菜单
踮脚敲代码
05-20 5094
一. 效果演示 1.1、好友右键菜单： 1.2、分组右键菜单： 1.3、群组右键菜单： 二. 实现教程 接下来我们以好友右键菜单为例，实现步骤如下： 2.1、绑定好友右击事件： /* 绑定好友右击事件 */ $('body').on('mousedown', '.layim-list-friend li ul li', function(e){ // 清空所有右击弹框 emptyTips(); // 过滤非右击事件 if(3 != e.which) { return
Iconfont使用方法的详细教程，html怎样引入iconfont
热门推荐
开心大表哥
03-05 5万+
1.首先在Iconfont-阿里巴巴矢量图标库上面找到你需要的图标然后加入你的购物车（这一步很简单，就像逛淘宝一样！）； 2.然后就是点击一下购物车，它会出现‘下载代码’的按钮，点击下载保存到本地； 3.接着就是把下载好的文件解压出来，放到项目的css文件夹（方便之后在html中引用）； 4.文件放到项目后，只需要引用iconfont.css这个文件即可； 5.最后一步肯定是调用了...
iframe+src=demo_iframe.htm
11-29
iframe是HTML中的一个标签，可以在一个HTML文档中嵌入另一个HTML文档。通过设置iframe的src属性为demo_iframe.htm，可以在当前HTML文档中嵌入demo_iframe.htm文档。例如： ```html <iframe src="demo_iframe.htm"></iframe> ``` 这将在当前HTML文档中嵌入demo_iframe.htm文档。如果demo_iframe.htm文档中含有边框，可以通过设置iframe的frameborder属性为"0"来移除边框，例如： ```html <iframe src="demo_iframe.htm" frameborder="0"></iframe> ``` 此外，可以通过设置iframe的name属性来给iframe命名，然后在链接中设置target属性为该name属性的值，从而在iframe中打开链接的目标页面。例如： ```html <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p> ``` 这将在iframe中打开W3School.com.cn网站。 另外，HTML5中还引入了loading属性，可以设置为"lazy"，表示在页面加载时不立即加载iframe中的内容，而是等到用户滚动到该部分时再加载。例如： ```html <iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值