12 |
IconFont 图标
13 |
14 |
15 | -
16 |
17 |
菜单
18 | .icon-caidan
19 |
20 |
21 | -
22 |
23 |
退出
24 | .icon-tuichu
25 |
26 |
27 |
28 |
29 |
font-class引用
30 |
31 |
32 |
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
33 |
与unicode使用方式相比,具有如下特点:
34 |
35 | - 兼容性良好,支持ie8+,及所有现代浏览器。
36 | - 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
37 | - 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
38 | - 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
39 |
40 |
使用步骤如下:
41 |
第一步:引入项目下面生成的fontclass代码:
42 |
43 |
44 |
45 |
第二步:挑选相应图标并获取类名,应用于页面:
46 |
<i class="iconfont icon-xxx"></i>
47 |
48 | "iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/src/assets/styles/iconfont/demo_symbol.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
27 |
IconFont 图标
28 |
29 |
30 | -
31 |
34 |
菜单
35 | #icon-caidan
36 |
37 |
38 | -
39 |
42 |
退出
43 | #icon-tuichu
44 |
45 |
46 |
47 |
48 |
49 |
symbol引用
50 |
51 |
52 |
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章
53 | 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
54 |
55 | - 支持多色图标了,不再受单色限制。
56 | - 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。
57 | - 兼容性较差,支持 ie9+,及现代浏览器。
58 | - 浏览器渲染svg的性能一般,还不如png。
59 |
60 |
使用步骤如下:
61 |
第一步:引入项目下面生成的symbol代码:
62 |
63 |
第二步:加入通用css代码(引入一次就行):
64 |
<style type="text/css">
65 | .icon {
66 | width: 1em; height: 1em;
67 | vertical-align: -0.15em;
68 | fill: currentColor;
69 | overflow: hidden;
70 | }
71 | </style>
72 |
第三步:挑选相应图标并获取类名,应用于页面:
73 |
<svg class="icon" aria-hidden="true">
74 | <use xlink:href="#icon-xxx"></use>
75 | </svg>
76 |
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/src/assets/styles/iconfont/demo_unicode.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
32 |
IconFont 图标
33 |
34 |
35 | -
36 |
37 |
菜单
38 | 
39 |
40 |
41 | -
42 |
43 |
退出
44 | 
45 |
46 |
47 |
48 |
unicode引用
49 |
50 |
51 |
unicode是字体在网页端最原始的应用方式,特点是:
52 |
53 | - 兼容性最好,支持ie6+,及所有现代浏览器。
54 | - 支持按字体的方式去动态调整图标大小,颜色等等。
55 | - 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
56 |
57 |
58 | 注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
59 |
60 |
unicode使用步骤如下:
61 |
第一步:拷贝项目下面生成的font-face
62 |
@font-face {
63 | font-family: 'iconfont';
64 | src: url('iconfont.eot');
65 | src: url('iconfont.eot?#iefix') format('embedded-opentype'),
66 | url('iconfont.woff') format('woff'),
67 | url('iconfont.ttf') format('truetype'),
68 | url('iconfont.svg#iconfont') format('svg');
69 | }
70 |
71 |
第二步:定义使用iconfont的样式
72 |
.iconfont{
73 | font-family:"iconfont" !important;
74 | font-size:16px;font-style:normal;
75 | -webkit-font-smoothing: antialiased;
76 | -webkit-text-stroke-width: 0.2px;
77 | -moz-osx-font-smoothing: grayscale;
78 | }
79 |
80 |
第三步:挑选相应图标并获取字体编码,应用于页面
81 |
<i class="iconfont">3</i>
82 |
83 |
84 | "iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。
85 |
86 |
87 |
88 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/src/assets/styles/iconfont/iconfont.css:
--------------------------------------------------------------------------------
1 |
2 | @font-face {font-family: "iconfont";
3 | src: url('iconfont.eot?t=1541066745838'); /* IE9*/
4 | src: url('iconfont.eot?t=1541066745838#iefix') format('embedded-opentype'), /* IE6-IE8 */
5 | url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAATMAAsAAAAAB1gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8skjdY21hcAAAAYAAAABWAAABhmht0UZnbHlmAAAB2AAAAQIAAAE8kxrG3GhlYWQAAALcAAAALwAAADYTISXvaGhlYQAAAwwAAAAcAAAAJAfeA4RobXR4AAADKAAAAAwAAAAMDAAAAGxvY2EAAAM0AAAACAAAAAgAPACebWF4cAAAAzwAAAAeAAAAIAEQAE5uYW1lAAADXAAAAUUAAAJtPlT+fXBvc3QAAASkAAAAKAAAADnUWbE+eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye2Tx7zdzwv4EhhrmBoQEozAiSAwDzgg0KeJztkLERgDAMA99OSMExCAUjMAgV46fJEEFxYAt099ZZdiVgAZI4RAa7MYYupRZ5Yo08x0+RG17P2nqHzyXTrYS7RuHXFnN/Nx9tTUaztU3wB3zzEeIAAHicTY49TsNAEIXn7ZoY2dJaEesYOZEt25K3C3FwnCIRCApa34ASiRtgitByA3o4gymSa0DJJdKkimFtQMpo9M2PZvQecdLBn9iGbPIoITqJpkWeqkhADo46nncb86Bfs2c/jv39gyZ77Yp/sPrt2XWcx4DGYwud27/aSjKi7xf+ye8ppCsiTLJcTbL0DGnckyE6MS8ye3IwvUQxQxKNMevnxVwbmGdjtAbNfgAvukA7J/yDc6O2h65VNUJIKbBbWe7Qrq3m7bS5DZUK8SUkIEWTLEugXP7PqI4N03hvryvIkcTKGrl2bTvNHVTA1oGCdPQpKxf7m0XJ9IsjiX4Avyk3KQAAeJxjYGRgYABi0bve3fH8Nl8ZuFkYQOAGw4efCPr/dBYG5kwgl4OBCSQKADXmCwsAeJxjYGRgYG7438AQw8IAAkCSkQEVMAMARwkCbAQAAAAEAAAABAAAAAAAAAAAPACeeJxjYGRgYGBmcAJiEGACYi4gZGD4D+YzAAAPUgFfAAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICZkYmRmZGFgS05MTMlMY+tpDQzOaOUgQEAMCQFGg==') format('woff'),
6 | url('iconfont.ttf?t=1541066745838') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
7 | url('iconfont.svg?t=1541066745838#iconfont') format('svg'); /* iOS 4.1- */
8 | }
9 |
10 | .iconfont {
11 | font-family:"iconfont" !important;
12 | font-size:16px;
13 | font-style:normal;
14 | -webkit-font-smoothing: antialiased;
15 | -moz-osx-font-smoothing: grayscale;
16 | }
17 |
18 | .icon-caidan:before { content: "\e63c"; }
19 |
20 | .icon-tuichu:before { content: "\e6eb"; }
21 |
22 |
--------------------------------------------------------------------------------
/src/assets/styles/iconfont/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jyhu1993/vue-cli3-node.js-axios/bd71c22decb1364fb0a289b4a800d9521fac8f0d/src/assets/styles/iconfont/iconfont.eot
--------------------------------------------------------------------------------
/src/assets/styles/iconfont/iconfont.js:
--------------------------------------------------------------------------------
1 | (function (window) { var svgSprite = '