Skip to content

O
online-resume

OpenDocCN / online-resume

通知 0
Star 0
Fork 0
O
online-resume

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 2c7c1a94 编写于 作者: J jlcao 提交者： GitHub
浏览文件
操作

Delete demo.html

上级 1bb841ba
隐藏空白更改
内联 并排
Showing with 0 addition and 403 deletion
static/fonts/demo.html 已删除 100644 → 0
浏览文件 @ 1bb841ba
<!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>
<div class="main">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>
<i class="icon iconfont">&#xea39;</i>
<div class="name">account_circle</div>
<div class="code">&amp;#xea39;</div>
<div class="fontclass">.accountcircle</div>
</li>
<li>
<i class="icon iconfont">&#xeac9;</i>
<div class="name">card_travel</div>
<div class="code">&amp;#xeac9;</div>
<div class="fontclass">.cardtravel</div>
</li>
<li>
<i class="icon iconfont">&#xeaf4;</i>
<div class="name">content_paste</div>
<div class="code">&amp;#xeaf4;</div>
<div class="fontclass">.contentpaste</div>
</li>
<li>
<i class="icon iconfont">&#xec7a;</i>
<div class="name">phone</div>
<div class="code">&amp;#xec7a;</div>
<div class="fontclass">.phone</div>
</li>
<li>
<i class="icon iconfont">&#xec7b;</i>
<div class="name">phone_android</div>
<div class="code">&amp;#xec7b;</div>
<div class="fontclass">.phoneandroid</div>
</li>
<li>
<i class="icon iconfont">&#xed32;</i>
<div class="name">stars</div>
<div class="code">&amp;#xed32;</div>
<div class="fontclass">.stars</div>
</li>
<li>
<i class="icon iconfont">&#xed1d;</i>
<div class="name">star_outline</div>
<div class="code">&amp;#xed1d;</div>
<div class="fontclass">.staroutline</div>
</li>
<li>
<i class="icon iconfont">&#xed1b;</i>
<div class="name">star</div>
<div class="code">&amp;#xed1b;</div>
<div class="fontclass">.star</div>
</li>
<li>
<i class="icon iconfont">&#xec88;</i>
<div class="name">person</div>
<div class="code">&amp;#xec88;</div>
<div class="fontclass">.person</div>
</li>
<li>
<i class="icon iconfont">&#xedac;</i>
<div class="name">work</div>
<div class="code">&amp;#xedac;</div>
<div class="fontclass">.work</div>
</li>
<li>
<i class="icon iconfont">&#xebf9;</i>
<div class="name">library_books</div>
<div class="code">&amp;#xebf9;</div>
<div class="fontclass">.librarybooks</div>
</li>
<li>
<i class="icon iconfont">&#xebca;</i>
<div class="name">import_contacts</div>
<div class="code">&amp;#xebca;</div>
<div class="fontclass">.importcontacts</div>
</li>
<li>
<i class="icon iconfont">&#xeaf8;</i>
<div class="name">create</div>
<div class="code">&amp;#xeaf8;</div>
<div class="fontclass">.create</div>
</li>
<li>
<i class="icon iconfont">&#xead7;</i>
<div class="name">comment</div>
<div class="code">&amp;#xead7;</div>
<div class="fontclass">.comment</div>
</li>
<li>
<i class="icon iconfont">&#xeab6;</i>
<div class="name">call</div>
<div class="code">&amp;#xeab6;</div>
<div class="fontclass">.call</div>
</li>
<li>
<i class="icon iconfont">&#x3488;</i>
<div class="name">微信</div>
<div class="code">&amp;#x3488;</div>
<div class="fontclass">.weixin</div>
</li>
<li>
<i class="icon iconfont">&#xeabe;</i>
<div class="name">camera</div>
<div class="code">&amp;#xeabe;</div>
<div class="fontclass">.camera</div>
</li>
<li>
<i class="icon iconfont">&#xeaa2;</i>
<div class="name">build</div>
<div class="code">&amp;#xeaa2;</div>
<div class="fontclass">.build</div>
</li>
<li>
<i class="icon iconfont">&#xea38;</i>
<div class="name">account_box</div>
<div class="code">&amp;#xea38;</div>
<div class="fontclass">.accountbox</div>
</li>
<li>
<i class="icon iconfont">&#xea7d;</i>
<div class="name">attach_money</div>
<div class="code">&amp;#xea7d;</div>
<div class="fontclass">.attachmoney</div>
</li>
<li>
<i class="icon iconfont">&#xea95;</i>
<div class="name">bookmark_outline</div>
<div class="code">&amp;#xea95;</div>
<div class="fontclass">.bookmarkoutline</div>
</li>
<li>
<i class="icon iconfont">&#xead2;</i>
<div class="name">chat_bubble_outline</div>
<div class="code">&amp;#xead2;</div>
<div class="fontclass">.chatbubbleoutline</div>
</li>
<li>
<i class="icon iconfont">&#xead0;</i>
<div class="name">chat</div>
<div class="code">&amp;#xead0;</div>
<div class="fontclass">.chat</div>
</li>
<li>
<i class="icon iconfont">&#xeadf;</i>
<div class="name">cloud</div>
<div class="code">&amp;#xeadf;</div>
<div class="fontclass">.cloud</div>
</li>
<li>
<i class="icon iconfont">&#xeb0f;</i>
<div class="name">desktop_windows</div>
<div class="code">&amp;#xeb0f;</div>
<div class="fontclass">.desktopwindows</div>
</li>
<li>
<i class="icon iconfont">&#xeb0e;</i>
<div class="name">desktop_mac</div>
<div class="code">&amp;#xeb0e;</div>
<div class="fontclass">.desktopmac</div>
</li>
<li>
<i class="icon iconfont">&#xeb31;</i>
<div class="name">edit</div>
<div class="code">&amp;#xeb31;</div>
<div class="fontclass">.edit</div>
</li>
<li>
<i class="icon iconfont">&#xeb4d;</i>
<div class="name">favorite_outline</div>
<div class="code">&amp;#xeb4d;</div>
<div class="fontclass">.favoriteoutline</div>
</li>
<li>
<i class="icon iconfont">&#xeb4c;</i>
<div class="name">favorite</div>
<div class="code">&amp;#xeb4c;</div>
<div class="fontclass">.favorite</div>
</li>
<li>
<i class="icon iconfont">&#xeb45;</i>
<div class="name">exposure_plus_1</div>
<div class="code">&amp;#xeb45;</div>
<div class="fontclass">.exposureplus1</div>
</li>
<li>
<i class="icon iconfont">&#xeb48;</i>
<div class="name">extension</div>
<div class="code">&amp;#xeb48;</div>
<div class="fontclass">.extension</div>
</li>
<li>
<i class="icon iconfont">&#xeb6f;</i>
<div class="name">flag</div>
<div class="code">&amp;#xeb6f;</div>
<div class="fontclass">.flag</div>
</li>
<li>
<i class="icon iconfont">&#xeb6e;</i>
<div class="name">fitness_center</div>
<div class="code">&amp;#xeb6e;</div>
<div class="fontclass">.fitnesscenter</div>
</li>
<li>
<i class="icon iconfont">&#xeb9c;</i>
<div class="name">free_breakfast</div>
<div class="code">&amp;#xeb9c;</div>
<div class="fontclass">.freebreakfast</div>
</li>
<li>
<i class="icon iconfont">&#xeb97;</i>
<div class="name">forum</div>
<div class="code">&amp;#xeb97;</div>
<div class="fontclass">.forum</div>
</li>
<li>
<i class="icon iconfont">&#xeba3;</i>
<div class="name">goat</div>
<div class="code">&amp;#xeba3;</div>
<div class="fontclass">.goat</div>
</li>
<li>
<i class="icon iconfont">&#xebc2;</i>
<div class="name">home</div>
<div class="code">&amp;#xebc2;</div>
<div class="fontclass">.home</div>
</li>
<li>
<i class="icon iconfont">&#xebc5;</i>
<div class="name">hourglass_empty</div>
<div class="code">&amp;#xebc5;</div>
<div class="fontclass">.hourglassempty</div>
</li>
<li>
<i class="icon iconfont">&#xec0a;</i>
<div class="name">local_florist</div>
<div class="code">&amp;#xec0a;</div>
<div class="fontclass">.localflorist</div>
</li>
<li>
<i class="icon iconfont">&#xec24;</i>
<div class="name">location_on</div>
<div class="code">&amp;#xec24;</div>
<div class="fontclass">.locationon</div>
</li>
<li>
<i class="icon iconfont">&#xec10;</i>
<div class="name">local_library</div>
<div class="code">&amp;#xec10;</div>
<div class="fontclass">.locallibrary</div>
</li>
<li>
<i class="icon iconfont">&#xecae;</i>
<div class="name">playlist_add</div>
<div class="code">&amp;#xecae;</div>
<div class="fontclass">.playlistadd</div>
</li>
<li>
<i class="icon iconfont">&#xebc0;</i>
<div class="name">highlight_remove</div>
<div class="code">&amp;#xebc0;</div>
<div class="fontclass">.highlightremove</div>
</li>
<li>
<i class="icon iconfont">&#xe61b;</i>
<div class="name">delete</div>
<div class="code">&amp;#xe61b;</div>
<div class="fontclass">.delete</div>
</li>
<li>
<i class="icon iconfont">&#xe610;</i>
<div class="name">delete</div>
<div class="code">&amp;#xe610;</div>
<div class="fontclass">.delete1</div>
</li>
<li>
<i class="icon iconfont">&#xe643;</i>
<div class="name">delete</div>
<div class="code">&amp;#xe643;</div>
<div class="fontclass">.delete2</div>
</li>
<li>
<i class="icon iconfont">&#xe620;</i>
<div class="name">add</div>
<div class="code">&amp;#xe620;</div>
<div class="fontclass">.add</div>
</li>
<li>
<i class="icon iconfont">&#xe676;</i>
<div class="name">add</div>
<div class="code">&amp;#xe676;</div>
<div class="fontclass">.add1</div>
</li>
<li>
<i class="icon iconfont">&#xe816;</i>
<div class="name">trophy</div>
<div class="code">&amp;#xe816;</div>
<div class="fontclass">.trophy</div>
</li>
<li>
<i class="icon iconfont">&#xe6fc;</i>
<div class="name">trophy</div>
<div class="code">&amp;#xe6fc;</div>
<div class="fontclass">.trophy1</div>
</li>
<li>
<i class="icon iconfont">&#xe80b;</i>
<div class="name">trophy</div>
<div class="code">&amp;#xe80b;</div>
<div class="fontclass">.trophy2</div>
</li>
</ul>
<div class="helps">
第一步：使用font-face声明字体
<pre>
@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- */
}
</pre>
第二步：定义使用iconfont的样式
<pre>
.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;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
</div>
</div>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或