Unicode 是字体在网页端最原始的应用方式，特点是：
285 |291 |293 |注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式
292 |
Unicode 使用步骤如下：
294 |@font-face@font-face {
297 | font-family: 'iconfont';
298 | src: url('iconfont.eot');
299 | src: url('iconfont.eot?#iefix') format('embedded-opentype'),
300 | url('iconfont.woff2') format('woff2'),
301 | url('iconfont.woff') format('woff'),
302 | url('iconfont.ttf') format('truetype'),
303 | url('iconfont.svg#iconfont') format('svg');
304 | }
305 | .iconfont {
309 | font-family: "iconfont" !important;
310 | font-size: 16px;
311 | font-style: normal;
312 | -webkit-font-smoothing: antialiased;
313 | -moz-osx-font-smoothing: grayscale;
314 | }
315 |
318 | <span class="iconfont">3</span>
320 |
321 | 322 |324 |"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
323 |
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
704 |与 Unicode 使用方式相比，具有如下特点：
705 |使用步骤如下：
712 |<link rel="stylesheet" href="./iconfont.css">
714 | <span class="iconfont icon-xxx"></span>
717 | 719 |722 |" 720 | iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
721 |
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 1061 | 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
1062 |font-size, color 来调整样式。使用步骤如下：
1069 |<script src="./iconfont.js"></script>
1071 | <style>
1074 | .icon {
1075 | width: 1em;
1076 | height: 1em;
1077 | vertical-align: -0.15em;
1078 | fill: currentColor;
1079 | overflow: hidden;
1080 | }
1081 | </style>
1082 | <svg class="icon" aria-hidden="true">
1085 | <use xlink:href="#icon-xxx"></use>
1086 | </svg>
1087 | {{ item.author }}
21 |22 | 23 | 24 | {{ 25 | item.look_time 26 | }} 27 | 28 | 29 | 30 | {{ item.comment_count }} 34 | 35 | 36 | 37 | {{ 38 | item.like_count 39 | }} 40 | 41 | {{ item.createdAt | dateformat('YYYY-MM-DD') }} 42 |
43 |
6 | 人菜瘾大bug多脾气差
7 |前端：Vue + Vuex + ElementUI + Sass
15 |后台：React + Ant Design + Redux
16 |服务端：Koa2 + Sequelize + MySQL
17 |18 | 源码地址：github 19 |
20 |
41 |-
42 |
43 |
45 |
46 |
47 |
48 | {{ item.createdAt }}
49 |
50 |
51 |
55 | {{ item.reply_like_count }}
56 |
65 |
66 |
67 |
72 |
73 |
74 |
75 |
136 |
137 |
142 |
143 |
144 |
145 |{{ item.content }}
44 |76 |-
77 |
78 |
79 | {{
80 | child.displayName
81 | }}
82 |
83 | {{ child.displayName }} :
86 |
87 | {{ child.answerContent }}
88 |
89 |
134 |
135 |90 |-
91 |
92 |
94 |
95 |
96 |
97 | {{ child.createdAt }}
98 |
99 |
100 |
104 | {{ child.reply_like_count }}
105 |
114 |
115 |
116 |
121 |
122 |
123 |
124 |
129 |
130 |
131 |
132 |
133 |{{ child.content }}
93 |