<!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"></i>
<div class="name">更多</div>
<div class="code">&#xe609;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">产品</div>
<div class="code">&#xe67b;</div>
</li>
<li>
<i class="icon iconfont"></i>
<div class="name">向下箭头</div>
<div class="code">&#xe60c;</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"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></code></pre>
<blockquote>
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p>
</blockquote>
</div>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
HTML+CSS+JavaScript实现迅雷首页官网
共51个文件
png:24个
jpg:11个
css:4个
3 下载量 6 浏览量
2023-05-31
10:06:04
上传
评论 1
收藏 13.34MB ZIP 举报
温馨提示
HTML+CSS+JavaScript实现迅雷首页官网
资源推荐
资源详情
资源评论
收起资源包目录
迅雷官网.zip (51个子文件)
css
xunlei.css 1KB
iconfont.ttf 2KB
iconfont.css 3KB
xunlei2.css 3KB
reset.css 257B
iconfont.svg 4KB
iconfont.eot 2KB
iconfont.woff 1KB
demo_unicode.html 4KB
JS
xunlei.js 739B
index.html 3KB
images
d66196540c8dd39dfd19141819a7b345.png 9KB
背景(2) 437B
favicon-20180801042537221.ico 1KB
201708081504168202.png 33KB
201801041036417544.jpg 233KB
201702151452362548.jpg 205KB
背景 714B
logo.png 4KB
201710271042113011.png 897KB
foot_btns.png 7KB
201712221919504308.png 31KB
safe_1.png 3KB
201708091809406091.png 344KB
201806261053564966.jpg 329KB
201702151452533692.jpg 126KB
ic_spr24.png 3KB
背景(3) 358B
pop_tip.png 18KB
carousel_btns.png 7KB
201805021446184133.jpg 76KB
safe_5.png 3KB
201703011021293427.jpg 82KB
201806082104343468.jpg 129KB
201805021845126464.png 195KB
product_logo.png 32KB
201804171831356107.png 2.65MB
safe_4.png 3KB
201702151507485990.png 13KB
code.jpg 8KB
video_txt.png 13KB
safe_2.png 3KB
carousel_txt.png 80KB
201805021444527093.jpg 69KB
safe_6.png 2KB
201705121701052141.png 7KB
safe_3.png 2KB
201703011020173137.jpg 477KB
pop_bg.png 54KB
201805021445451722.jpg 160KB
201702241034284066.mp4 7.17MB
共 51 条
- 1
资源评论
王同学要努力
- 粉丝: 3w+
- 资源: 52
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功