<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2230993" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">购物车空</div>
<div class="code-name">&#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">向下箭头</div>
<div class="code-name">&#xeb1f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">圆圈</div>
<div class="code-name">&#xe668;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">右箭头</div>
<div class="code-name">&#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">家具</div>
<div class="code-name">&#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">电脑</div>
<div class="code-name">&#xe621;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">手机</div>
<div class="code-name">&#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">火车票</div>
<div class="code-name">&#xe638;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">加油卡</div>
<div class="code-name">&#xe63a;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">飞机</div>
<div class="code-name">&#xe669;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">服装</div>
<div class="code-name">&#xe64c;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">家电</div>
<div class="code-name">&#xe662;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">白条闪付</div>
<div class="code-name">&#xe632;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">手机</div>
<div class="code-name">&#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">理财</div>
<div class="code-name">&#xe697;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">游戏</div>
<div class="code-name">&#xe60b;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">电影票</div>
<div class="code-name">&#xe8ae;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">礼品卡</div>
<div class="code-name">&#xe8b2;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">众筹订单</div>
<div class="code-name">&#xe60d;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">酒店</div>
<div class="code-name">&#xe79a;</div>
</li>
</ul>
<div class="article markdown">
<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">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
<pre>
<code class="language-html"
><span class="iconfont">&#x33;</span>
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
通用电商模板提供下载,都是html静态页面,设计好的前端页面 1 绪论 1 1.1 项目开发背景 1 1.2 论文的研究目的和意义 2 1.2.1 开发的研究目的 2 1.2.2 开发的研究意义 3 2 项目介绍 4 2.1 web前端开发 4 2.1.1 web前端开发简介 4 2.1.2 项目介绍 4 2.1.3 项目特点 5 2.2开发工具简介 5 2.2.1HTML简介 6 2.2.2JavaScript简介 6 2.2.3 CSS简介 7 2.2.4Hbuilder简介 7 3 系统的需求分析与设计 7 3 项目开始 8 3.1可行性分析 8 3.2 页面分析 9 3.2.1 公共样式分析 9 3.2.2 首页分析 9 3.3 字体引入 11 3.4 页面制作 14 3.4.1 首页 14 3.4.2 列表页 18 3.4.3 商品详情页 20 3.4.4 购物车页面 22 结论 24 参 考 文 献 25 致 谢 26
资源推荐
资源详情
资源评论
收起资源包目录
基于HTML品优购项目的设计与实现.rar (74个子文件)
品优购设计Html
dingdan.html 13KB
css
shap_car.css 2KB
dingdan.css 8KB
base.css 1KB
common.css 5KB
xiangqing.css 5KB
register.css 2KB
login.css 2KB
index.css 3KB
list.css 2KB
upload
list.jpg 22KB
recom_03.jpg 11KB
floor-1-3.png 13KB
floor-1-6.png 12KB
floor-1-5.png 10KB
)I(W`2Q@PK8YK}T]LSRKH4X.png 27KB
bg_03.png 93KB
bargain.png 37KB
focus1.png 423KB
floor-1-1.png 16KB
floor-1-4.png 18KB
floor-1-b01.png 26KB
floor-1-2.png 11KB
bg_03.jpg 59KB
images
recom.png 3KB
wx_cz.jpg 7KB
fukuan2.png 221B
fukuan3.png 757B
2.jpg 2KB
客服.png 2KB
1.jpg 50KB
6.jpg 2KB
success.png 2KB
3.jpg 1KB
5.jpg 1KB
分享.png 2KB
right.png 299B
iphone.png 15KB
icons.png 37KB
4.jpg 1KB
dingdanlogo.png 809B
对比.png 2KB
guanzhu.png 2KB
sk.png 2KB
Tina毛logo.png 2KB
user.png 4KB
logo.png 4KB
门店有售.png 1KB
iphone12.jpg 24KB
iphone11.jpg 8KB
fukuan1.png 217B
left.png 349B
error.png 2KB
关注.png 17KB
下载.jpg 4KB
fonts
iconfont.eot 7KB
iconfont.json 3KB
iconfont.ttf 6KB
iconfont.svg 22KB
iconfont.js 23KB
demo_index.html 22KB
iconfont.woff 4KB
iconfont.woff2 4KB
demo.css 8KB
iconfont.css 6KB
login.html 3KB
index.html 21KB
js
shap_car.js 5KB
shap_car.html 14KB
list.html 12KB
register.html 4KB
xiangqing.html 19KB
favicon.ico 9KB
基于HTML品优购项目的设计与实现1.docx 5.19MB
共 74 条
- 1
知识数据库
- 粉丝: 9
- 资源: 2万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 学校课程软件工程常见10道题目以及答案demo
- javaweb新手开发中常见的目录结构讲解
- 新手小白的git使用的手册入门学习demo
- 基于Java观察者模式的info-express多对多广播通信框架设计源码
- 利用python爬取豆瓣电影评分简单案例demo
- 机器人开发中常见的几道问题以及答案demo
- 基于SpringBoot和layuimini的简洁美观后台权限管理系统设计源码
- 实验报告五六代码.zip
- hdw-dubbo-ui基于vue、element-ui构建开发,实现后台管理前端功能.zip
- (Grafana + Zabbix + ASP.NET Core 2.1 + ECharts + Dapper + Swagger + layuiAdmin)基于角色授权的权限体系.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
- 3
- 4
- 5
- 6
前往页