demo_unicode.html

最新推荐文章于 2023-01-10 20:10:25 发布
原创 最新推荐文章于 2023-01-10 20:10:25 发布 · 520 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了如何在网页中使用IconFont图标，包括@font-face的配置、样式定义及Unicode引用方法，适合前端开发者学习。 
<!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>
手把手分析 lv_config.h 文件
少年一贯快马扬帆，道阻且长不转弯； 要盛大，要绚烂，要哗然； 要用理想的泰坦尼克，去撞现实的冰川； 要当烧赤壁的风，而非借鉴草船； 要为了一片海，就肯翻万山。
09-23 1394
如果设置为 1，表示启用全局自定义功能。如果启用全局自定义功能 (LV_ENABLE_GLOBAL_CUSTOM == 1)，可以配置以下选项：LV_GLOBAL_CUSTOM_INCLUDE 宏定义了用于全局自定义函数的头文件路径。在这里，它包括了 头文件，这是 C 标准库的头文件，用于定义整数类型。LV_CACHE_DEF_SIZE 宏定义了。
iconfont.zip
05-29
IconFont 图标库
Layui-经典模块化前端框架
x1206945132的博客
12-23 1634
LayUI 1. LayUI简介 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。 1.1 下载 官网：https://www.layui.com/ 下载后的目录结构如下： ├─css //css目录 │ │─modules //模块css目录 │ │ ├─layd
html-科技公司介绍网站-网站源码.zip
03-09
这套HTML源代码文件为您呈现了一个完整的网页模板，适用于各类网站开发需求。它采用了前沿的HTML5和CSS3技术，实现了响应式设计，能够无缝适配各种设备的屏幕尺寸。此外，它还内置了丰富的JavaScript插件，助您轻松实现各种复杂的交互效果。这套源代码文件具有极高的可定制性，您可以根据您的项目需求，对页面布局、颜色和内容进行个性化调整，轻松打造出独具特色的网站。同时，我们的代码结构清晰、注释详细，便于您学习和掌握HTML、CSS和JavaScript等前端技术。无论您是面临课程设计、毕业设计等学术挑战，还是希望在职业发展中展示自己的才华和技能，这套源代码文件都将成为您的得力助手。通过使用这套源代码文件，您将轻松完成网站搭建任务，为您的课程设计或毕业设计增添独特亮点。总之，这套HTML源代码文件是一个高效、实用且易于上手的工具，无论您是专业的网页设计师，还是业余的编程爱好者，都值得一试。
IconFont图标库
weixin_46822367的博客
05-29 3979
图标库 <!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
iconfont 图标库使用方法总结
lucky123star的博客
12-14 2628
方法1：使用在线链接              @font-face {       font-family: 'iconfont';  /* project id 444753 */       src: url('https://at.alicdn.com/t/font_444753_3bdwpst82jfw29.eot');       src: url('h
鸿蒙6中怎么使用iconfont.ttf和demo_index.html文件
最新发布
11-05
- 在代码中，使用Text组件，将其text属性设置为对应的Unicode字符串（注意格式：'\uXXXX'，其中XXXX是Unicode码点，通常demo_index.html中显示为&#xXXXX;，我们取XXXX部分，并转换成Unicode转义序列）。 另外，...
(NNNN) xxw516@516:~/mmtracking$ python demo/demo_mot_vis.py configs/mot/deepsort/sort_faster-rcnn_fpn_4e_mot17-private.py --input demo/demo.mp4 --output mot.mp4 /home/xxw516/anaconda3/envs/NNNN/lib/python3.8/site-packages/mmcv/__init__.py:20: UserWarning:
07-06
print(f'PyTorch: {torch.__version__}, CUDA: {torch.version.cuda}')" python -c "import mmcv; print(f'MMCV: {mmcv.__version__}')" ``` - 对照 MMCV 官方[版本兼容表]...
html在母版页中布局,MVC母版页_Layout.cshtml
weixin_30045135的博客
06-22 798
记得在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算法的开源库，用于计算和应用双向文本的显示顺序。这个库可以被各种编程语言的...
这是一款基于vue与elementu-ui开发的聊天室组件库，在UI上模仿了TIM及微信
05-22
这是一款基于vue与elementu-ui开发的聊天室组件库，在UI上模仿了TIM及微信。在提供基础封装的同时，最大程度的增加扩展性
HTML特殊字符编码对照表
gangli_8的博客
03-13 1847
HTML特殊字符编码对照表
iconfont使用方法
qq_34856863的博客
12-31 521
<i class="iconfont">&#xe605;</i> css @font-face {font-family: 'iconfont'; src: url('../iconFont/iconfont.eot'); src: url('../iconFont/iconfont.eot?#iefix') format('embedded-...
Vue中引入阿里巴巴矢量图标库
qq_43576662的博客
03-29 463
vue项目中引入阿里巴巴矢量图标库 官方网站链接：阿里巴巴矢量图标库 选择想要的图标，添加到项目中 选择Unicode模式并下载至本地 此时，本地便会有一个download.zip的一个压缩包 解压之后有如下文件，将文件复制到项目中，demo.css和demo_index.html可不复制，demo_index.html文件是对添加图标的一个详细说明 将文件复制到项目的src/assets/iconfont目录下 在main.js文件中将图标引入iconfont目录下的iconfont.css文件，便可
HTML特殊符号对照表
路漫漫 需上下求索
12-15 720
特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α Α Α Β Β Β Γ Γ Γ Δ Δ Δ
HTML中引入阿里Unicode图标
优快云QQQ的博客
10-30 3077
@[HTML引入阿里Unicode图标]a HTML引入阿里Unicode图标 暑假的时候刚开始使用阿里的Unicode图标，但有时候总是加载不出来，后来不知道怎么回事好了，就没有再去研究他，最近又有用到这个图标，所以又重新看了一下；我觉得大家可能会有和我一样的问题，希望会有点帮助。 下载Unicode的图标压缩包 首先我们可以去阿里巴巴矢量图标库上下载。 1.进入网站登录上自己的账号； 2.选择...
HTML+CSS实现前端注册页
yujiaj的博客
07-01 411
HTML+CSS实现前端注册页 效果图： HTML代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title&g
HTML特殊字符表
TayGo
11-16 279
HTML特殊字符表
jsp展现MySQL中的图片
dream_wx的博客
01-10 333
【代码】jsp展现MySQL中的图片。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值