m534ctfno
/
vue-shop-admin-work
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mhx

Browse Source
马海馨 8 months ago
parent 5c31ffae4b
commit 0629b731f3
3 changed files with 133 additions and 62 deletions
Show Stats Download Patch File Download Diff File

140
src/assets/fonts/demo_fontclass.html
Unescape View File

@ -1,100 +1,120 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont</title>
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<meta charset="utf-8"/> <!-- 设置文档的字符编码为UTF-8 -->
<title>IconFont</title> <!-- 设置网页的标题为IconFont -->
<link rel="stylesheet" href="demo.css"> <!-- 引入demo.css样式文件，用于页面的样式设计 -->
<link rel="stylesheet" href="iconfont.css"> <!-- 引入iconfont.css样式文件，包含图标字体的样式定义 -->
</head>
<body>
<div class="main markdown">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<div class="main markdown"> <!-- 定义一个主容器，使用main和markdown类进行样式设置 -->
<h1>IconFont 图标</h1> <!-- 设置一个一级标题，显示“IconFont 图标” -->
<ul class="icon_lists clear"> <!-- 定义一个无序列表，用于展示图标，同时添加clear类清除浮动 -->
<li>
<i class="icon iconfont icon-showpassword"></i>
<div class="name">show-password </div>
<div class="fontclass">.icon-showpassword</div>
<li> <!-- 列表项开始 -->
<i class="icon iconfont icon-showpassword"></i> <!-- 使用icon、iconfont和icon-showpassword类显示一个显示密码的图标 -->
<!-- 图标显示区域 -->
<div class="name">show-password </div> <!-- 显示图标的名称 -->
<!-- 图标名称显示区域 -->
<div class="fontclass">.icon-showpassword</div> <!-- 显示图标字体类名，用于开发者引用 -->
<!-- 图标字体类名显示区域 -->
</li>
<!-- 列表项结束 -->
<li>
<i class="icon iconfont icon-user"></i>
<div class="name">user</div>
<div class="fontclass">.icon-user</div>
<li> <!-- 另一个列表项开始 -->
<i class="icon iconfont icon-user"></i> <!-- 使用icon、iconfont和icon-user类显示一个用户图标 -->
<!-- 图标显示区域 -->
<div class="name">user</div> <!-- 显示图标的名称 -->
<!-- 图标名称显示区域 -->
<div class="fontclass">.icon-user</div> <!-- 显示图标字体类名 -->
<!-- 图标字体类名显示区域 -->
</li>
<!-- 列表项结束 -->
<li>
<!-- 后续列表项省略，格式与上述类似 -->
<li> <!-- 列表项开始，展示“用户们”图标 -->
<i class="icon iconfont icon-users"></i>
<div class="name">users</div>
<div class="fontclass">.icon-users</div>
</li>
<li>
<!-- 列表项结束 -->
<li> <!-- 列表项开始，展示“密码-b”图标 -->
<i class="icon iconfont icon-3702mima"></i>
<div class="name">password-b</div>
<div class="fontclass">.icon-3702mima</div>
</li>
<li>
<!-- 列表项结束 -->
<li> <!-- 列表项开始，展示“06商品”图标 -->
<i class="icon iconfont icon-shangpin"></i>
<div class="name">06商品</div>
<div class="fontclass">.icon-shangpin</div>
</li>
<li>
<!-- 列表项结束 -->
<li> <!-- 列表项开始，展示“25单据”图标 -->
<i class="icon iconfont icon-danju"></i>
<div class="name">25单据</div>
<div class="fontclass">.icon-danju</div>
</li>
<li>
<!-- 列表项结束 -->
<li> <!-- 列表项开始，展示“28体积、空间”图标 -->
<i class="icon iconfont icon-tijikongjian"></i>
<div class="name">28体积、空间</div>
<div class="fontclass">.icon-tijikongjian</div>
</li>
<li>
<i class="icon iconfont icon-morentouxiang"></i>
<div class="name">225默认头像</div>
<div class="fontclass">.icon-morentouxiang</div>
</li>
<i class="icon iconfont icon-morentouxiang"></i> <!-- 图标元素，使用iconfont图标库中的“默认头像”图标 -->
<div class="name">225默认头像</div> <!-- 图标名称，显示该图标的描述 -->
<div class="fontclass">.icon-morentouxiang</div> <!-- 图标类名，用于在CSS或JavaScript中引用该图标 -->
</li>
<li>
<i class="icon iconfont icon-baobiao"></i>
<div class="name">406报表</div>
<div class="fontclass">.icon-baobiao</div>
</li>
<li>
<i class="icon iconfont icon-baobiao"></i> <!-- 图标元素，使用iconfont图标库中的“报表”图标 -->
<div class="name">406报表</div> <!-- 图标名称，显示该图标的描述 -->
<div class="fontclass">.icon-baobiao</div> <!-- 图标类名，用于在CSS或JavaScript中引用该图标 -->
</li>
<li>
<i class="icon iconfont icon-lock_fill"></i>
<div class="name">lock_fill</div>
<div class="fontclass">.icon-lock_fill</div>
</li>
<li>
<i class="icon iconfont icon-lock_fill"></i> <!-- 图标元素，使用iconfont图标库中的“lock_fill”图标 -->
<div class="name">lock_fill</div> <!-- 图标名称，显示该图标的描述 -->
<div class="fontclass">.icon-lock_fill</div> <!-- 图标类名，用于在CSS或JavaScript中引用该图标 -->
</li>
</ul>
</ul>
<h2 id="font-class-">font-class引用</h2>
<hr>
<!-- 标题，说明接下来要介绍font-class引用方式 -->
<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>
<!-- 介绍font-class引用方式的优点 -->
<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>
<!-- 第一步：引入fontclass代码 -->
<h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
<pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
<!-- 注释说明：引入iconfont.css文件，该文件包含了图标字体的定义 -->
<pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="lang-css hljs">&lt;<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>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
<blockquote>
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
</blockquote>
</div>
<!-- 第二步：挑选相应图标并获取类名，应用于页面 -->
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="lang-css hljs">&lt;<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>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
<!-- 注释说明：使用<i>标签，并添加iconfont和具体的图标类名（如icon-xxx），来在页面上显示图标 -->
<blockquote>
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
<!-- 注释说明：iconfont是CSS中定义的字体族名，用于指定图标字体 -->
</blockquote>
</div>
</body>
</html>

14
src/assets/fonts/demo_symbol.html
Unescape View File

@ -1,27 +1,41 @@
<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<html>
<!-- HTML文档的根元素 -->
<head>
<!-- 头部元素，包含文档的元数据 -->
<meta charset="utf-8"/>
<!-- 指定文档使用的字符编码为UTF-8 -->
<title>IconFont</title>
<!-- 设置文档的标题，显示在浏览器的标签页上 -->
<link rel="stylesheet" href="demo.css">
<!-- 链接外部样式表demo.css，用于定义页面的样式 -->
<script src="iconfont.js"></script>
<!-- 引入外部JavaScript文件iconfont.js，可能包含图标字体的初始化代码或功能 -->
<style type="text/css">
<!-- 内部样式表，定义具体的CSS规则 -->
.icon {
/* 图标类的基本样式定义 */
/* 通过设置 font-size 来改变图标大小 */
width: 1em; height: 1em;
/* 使用em单位设置图标的宽度和高度，em单位相对于当前元素的字体大小 */
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过微调vertical-align属性，使图标与文本垂直对齐 */
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* 使用currentColor关键字，使图标的填充颜色与父元素的文本颜色一致 */
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
/* 隐藏超出SVG viewBox边界的内容，解决IE浏览器的显示问题 */
}
</style>
</head>
<body>
<div class="main markdown">
<h1>IconFont 图标</h1>

41
src/assets/fonts/iconfont.svg
Unescape View File

@ -1,15 +1,40 @@
<?xml version="1.0" standalone="no"?>
<?xml version="1.0" standalone="no"?> <!-- 声明XML版本为1.0，且不是独立文档 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
文档类型定义（DTD），指定这是一个SVG 1.1文档，并链接到SVG 1.1的DTD。
DTD定义了SVG文档的结构和允许的元素。
-->
<!--
2013-9-30: Created.
-->
<!--
注释：该SVG文件是在2013年9月30日创建的。
-->
<svg>
<!--
SVG根元素，所有SVG内容都包含在此元素内。
-->
<metadata>
<!--
元数据元素，用于存储有关SVG文件的额外信息。
-->
Created by iconfont
<!--
元数据内容，说明该SVG文件是由iconfont创建的。
-->
</metadata>
<defs>
<!--
定义元素，用于存储SVG文档中可重复使用的元素定义。
例如，可以在这里定义渐变、滤镜、字体等。
-->
<font id="iconfont" horiz-adv-x="1024" >
<!--
字体元素，定义一个SVG字体。
id属性为字体指定一个唯一标识符。
horiz-adv-x属性指定水平高级宽度，即字体中字符的水平间距。
-->
<font-face
font-family="iconfont"
font-weight="500"
@ -18,8 +43,20 @@ Created by iconfont
ascent="896"
descent="-128"
/>
<!--
font-face元素，定义字体的外观属性。
font-family属性指定字体的名称。
font-weight属性指定字体的粗细。
font-stretch属性指定字体的拉伸程度。
units-per-em属性指定em单位的尺寸，em是相对于字体大小的单位。
ascent属性指定字符的上升部分的高度。
descent属性指定字符的下降部分的高度（负值表示下降）。
-->
<missing-glyph />
<!--
missing-glyph元素，定义当字符在字体中找不到时显示的默认图形。
在这个例子中，没有指定missing-glyph的内容，所以它可能是一个空图形或默认的回退图形。
-->
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

Write Preview
Loading…
Cancel
Save