demo_symbol.html

最新推荐文章于 2024-05-31 10:24:04 发布
最新推荐文章于 2024-05-31 10:24:04 发布
阅读量339 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mikibiubiu/article/details/104460553
本文详细介绍了如何使用IconFont图标库，包括引入代码、CSS样式设置以及如何在页面中应用图标。提供了symbol引用方法，适合现代浏览器，支持多色图标和调整样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuaxin"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#icon-shuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shujuku"></use>
                    </svg>
                    <div class="name">数据库</div>
                    <div class="fontclass">#icon-shujuku</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenzhang"></use>
                    </svg>
                    <div class="name">文章</div>
                    <div class="fontclass">#icon-wenzhang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lianjie"></use>
                    </svg>
                    <div class="name">链接</div>
                    <div class="fontclass">#icon-lianjie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caidan"></use>
                    </svg>
                    <div class="name">菜单</div>
                    <div class="fontclass">#icon-caidan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youjian"></use>
                    </svg>
                    <div class="name">邮件</div>
                    <div class="fontclass">#icon-youjian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuijian"></use>
                    </svg>
                    <div class="name">推荐</div>
                    <div class="fontclass">#icon-tuijian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-msg"></use>
                    </svg>
                    <div class="name">评论 </div>
                    <div class="fontclass">#icon-msg</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-userpro"></use>
                    </svg>
                    <div class="name">头像</div>
                    <div class="fontclass">#icon-userpro</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-leimulianjie"></use>
                    </svg>
                    <div class="name">类目链接</div>
                    <div class="fontclass">#icon-leimulianjie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-list"></use>
                    </svg>
                    <div class="name">名单</div>
                    <div class="fontclass">#icon-list</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-remind"></use>
                    </svg>
                    <div class="name">提醒</div>
                    <div class="fontclass">#icon-remind</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Password"></use>
                    </svg>
                    <div class="name">密码</div>
                    <div class="fontclass">#icon-Password</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Setup"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-Setup</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangsheng"></use>
                    </svg>
                    <div class="name">上升</div>
                    <div class="fontclass">#icon-shangsheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fajianxiang"></use>
                    </svg>
                    <div class="name">发件箱</div>
                    <div class="fontclass">#icon-fajianxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiajiang"></use>
                    </svg>
                    <div class="name">上升</div>
                    <div class="fontclass">#icon-xiajiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paixu"></use>
                    </svg>
                    <div class="name">排序</div>
                    <div class="fontclass">#icon-paixu</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
HTML常用符号大全
phphot
04-05 8011
HTML常用符号：如何显示空格通常情况下，HTML会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你可以使用 表示空格。最常用的字符实体(Character Entities)显示结果 说明 Entity Name Entity Number 显示一个空格    >
【Python可视化图表开发pyecharts】第6课时-pyecharts基本图表
xzs51job的专栏
08-23 746
【代码】【Python可视化图表开发pyecharts】第6课时-pyecharts基本图表。
HTML 转义字符（escape characters）及其对应的符号（symbols）
weixin_44929577的博客
05-31 1753
以下是常见的 HTML 转义字符及其对应的符号，这些可以用于在 HTML 或 JSX 中避免解析错误和特殊字符的冲突：
html中的svg,symbol和use标签
热门推荐
子燕若水的博客
12-08 1万+
<svg> Thesvgelement is a container that defines a new coordinate system andviewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.svg 元素是一个容器，它定义了一个新的坐标系和视口。...
html5 symbol,2.3 ES6 Symbol
weixin_39845206的博客
06-15 184
概述ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ，还新增了 Symbol 。基本用法Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象。可以接受一个字符串作为参数，为新创建...
[html] symbol of <b> and <strong>
weixin_33682719的博客
05-26 111
When testing in WCAG, the symbol of &lt;b&gt; will take some error, but why? How can we do if we want to bold the font? The answer: use &lt;strong&gt; instead.   &lt;strong&gt; is the standard of ...
JS-.rar_DEMO_js_js demo_js的demo
09-22
在“JS-.rar_DEMO_js_js demo_js的demo”这个压缩包中，包含的是大量的JavaScript示例代码和相关资料，这些资源对于学习和理解JavaScript的基本语法、函数、对象、DOM操作、事件处理等核心概念非常有帮助。...
EurekaLog_7.5.0.0_Enterprise
11-15
9)....Added: EMemLeaks._ReserveOutOfMemory to control reserve size of out of memory errors (default is 50 Mb) 10)..Added: "MinLeaksLimitObjs" option (EMemLeaks unit) 11)..Added: Fatal memory problem ...
demo_17ht
02-15
基本数据类型包括字符串（String）、数字（Number）、布尔值（Boolean）、空（null）、未定义（undefined）以及ES6新增的Symbol和BigInt。 2. **控制结构**：JavaScript提供了条件语句（如if...else，switch...case...
同时出现多个Error: L6218E: Undefined symbol……且都指向同一外设功能的问题解决
kaoyanshiyong的博客
11-09 969
新手成长过程中，难免会遇到各种磕磕绊绊，比如我； 昨天晚上睡觉之前，本想点睡眠或锁定电脑的，这样也无所谓保存没有，但是人一迷糊手一偏，给关机了——眼睁睁的看着询问是否保存的对话框出现了一两秒钟以后就强制退出、黑屏了——我没保存啊！连续干了两三天才调好 的，也不知道最后一次保存到哪一步了。。。 然后今早起来重复，由于是混合了多个项目，没有现成案例，我只能尽量依靠自己的大脑记忆； 最后自认为都恢复好了...
Html 特殊符号
happy___wind的博客
03-02 1546
html网页编程中遇到的特殊符号。
ES6——Symbol(2)，HTML常用的五种标签
m0_61331407的博客
03-16 1048
在 ES5 使用字符串表示常量。例如：但是用字符串不能保证常量是独特的，这样会引起一些问题：default:try {// green 引发异常// 传递异常对象到错误处理但是使用 Symbol 定义常量，这样就可以保证这一组常量的值都不相等。用 Symbol 来修改上面的例子。default:try {// green 引发异常// 传递异常对象到错误处理。
Symbol path 设置
宇宙终级定理
05-10 4106
_NT_SYMBOL_PATH=SRV*c:\mysymbol* http://msdl.microsoft.com/download/symbols
html里的symbol标签,export_symbol
weixin_39627455的博客
06-16 1086
全局变量 与export symbol区别如何查看中间文件export的symbolLinux中EXPO_SYMBOL的用法 EXPO_SYMBOL标签内定义的函数对全部内核代码公开，不用修改内核代码就可以在您的内核模块中直接调用。您还可以手工修改内核源代码来导出另外的函数，用于重新编译并加载新内核后的测试。在rt-thread中M_EXPO()是什么意思?#if defined(_MSC_VER...
在html和vue中使用iconfont的symble色彩图标
qq_45693448的博客
05-16 502
在html以及vue中使用iconfont的symbol图标写给新手看的首先注册iconfont,并创建一个项目，在图标库把选择的图标加入项目可以选择使用在线链接，这里推荐下载到本地要注意使用class 写给新手看的 首先注册iconfont,并创建一个项目，在图标库把选择的图标加入项目 可以选择使用在线链接，这里推荐下载到本地 在项目新建一个文件夹，同时新建一个css文件，把官网使用帮助里的css复制出来，粘贴到新建的css里面 vue html 把下载的文件解压，选择里面的js文件，并在项目引入
HTML 5入门 (4)——特殊符号的使用
季白之二七的博客
08-20 903
特殊符号的使用 一、HTML实体 在 HTML 中，某些字符是预留的。如不能使用小于号（&amp;amp;amp;lt;）和大于号（&amp;amp;amp;gt;）,这是因为浏览器会误认为它们是标签。要正确的显示预留字符，就需在 HTML 源代码中使用字符实体（character entities）。 ...
阿里矢量图标如何引用详解
weixin_69474694的博客
07-17 979
阿里矢量图标
阿里图标svg 的使用方式
qq_42451776的博客
11-30 2594
第一步，下载到本地 只要iconfont.js这个文件，再main.js终导入即可 import '@/assets/svg/iconfont.js'; 页面使用 注意这儿的user1 就是图标的名字 <svg aria-hidden="true" width="20" height="20"> <use xlink:href="#icon-user1"></use> </svg> ...
字体图标（iconfont）
MEiSAH的博客
01-17 1165
字体图标是为解决图片放大或缩小后失真、整站图片过多请求和整站体积过多的问题。字体图标可以和图片改变透明度、旋转等，其本质是文字所以也可以改变颜色、添加阴影等效果而且一般来说比图片体积会更小并被绝大部分浏览器支持。例如常见的购物车图标，按钮图标等都可以采用字体图标来做，用font-size来控制大小，用color来控制颜色等。 以阿里巴巴图标库为例： 字体图标下载完后目录如图，将其拷贝到项目中，在...
csdn的svg.html
最新发布
04-01
好的，我现在需要处理用户关于在优快云上查找SVG文件或HTML页面示例或教程的请求。首先，用户提到的引用内容涉及SVG在HTML...- **优化技巧**：路径简化、复用`<symbol>`元素 搜索`优快云 SVG优化方案`可获取10+篇相关文章。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值