12 |
IconFont 图标
13 |
14 |
15 | -
16 |
17 |
fire
18 | .icon-fire
19 |
20 |
21 | -
22 |
23 |
朋友圈
24 | .icon-pengyouquan
25 |
26 |
27 | -
28 |
29 |
我的
30 | .icon-wode-active
31 |
32 |
33 | -
34 |
35 |
通讯录
36 | .icon-tongxunlu
37 |
38 |
39 | -
40 |
41 |
指南针 (1)
42 | .icon-zhinanzhen
43 |
44 |
45 | -
46 |
47 |
指南针
48 | .icon-zhinanzhen1
49 |
50 |
51 |
52 |
53 |
font-class引用
54 |
55 |
56 |
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
57 |
与unicode使用方式相比,具有如下特点:
58 |
59 | - 兼容性良好,支持ie8+,及所有现代浏览器。
60 | - 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
61 | - 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
62 | - 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
63 |
64 |
使用步骤如下:
65 |
第一步:引入项目下面生成的fontclass代码:
66 |
67 |
68 |
69 |
第二步:挑选相应图标并获取类名,应用于页面:
70 |
<i class="iconfont icon-xxx"></i>
71 |
72 | "iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。
73 |
74 |
75 |
76 |
77 |
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/fontico/demo_symbol.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
27 |
IconFont 图标
28 |
29 |
30 | -
31 |
34 |
fire
35 | #icon-fire
36 |
37 |
38 | -
39 |
42 |
朋友圈
43 | #icon-pengyouquan
44 |
45 |
46 | -
47 |
50 |
我的
51 | #icon-wode-active
52 |
53 |
54 | -
55 |
58 |
通讯录
59 | #icon-tongxunlu
60 |
61 |
62 | -
63 |
66 |
指南针 (1)
67 | #icon-zhinanzhen
68 |
69 |
70 | -
71 |
74 |
指南针
75 | #icon-zhinanzhen1
76 |
77 |
78 |
79 |
80 |
81 |
symbol引用
82 |
83 |
84 |
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章
85 | 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:
86 |
87 | - 支持多色图标了,不再受单色限制。
88 | - 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。
89 | - 兼容性较差,支持 ie9+,及现代浏览器。
90 | - 浏览器渲染svg的性能一般,还不如png。
91 |
92 |
使用步骤如下:
93 |
第一步:引入项目下面生成的symbol代码:
94 |
95 |
第二步:加入通用css代码(引入一次就行):
96 |
<style type="text/css">
97 | .icon {
98 | width: 1em; height: 1em;
99 | vertical-align: -0.15em;
100 | fill: currentColor;
101 | overflow: hidden;
102 | }
103 | </style>
104 |
第三步:挑选相应图标并获取类名,应用于页面:
105 |
<svg class="icon" aria-hidden="true">
106 | <use xlink:href="#icon-xxx"></use>
107 | </svg>
108 |
109 |
110 |
111 |
112 |
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/fontico/demo_unicode.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
32 |
IconFont 图标
33 |
34 |
35 | -
36 |
37 |
fire
38 | 
39 |
40 |
41 | -
42 |
43 |
朋友圈
44 | 
45 |
46 |
47 | -
48 |
49 |
我的
50 | 
51 |
52 |
53 | -
54 |
55 |
通讯录
56 | 
57 |
58 |
59 | -
60 |
61 |
指南针 (1)
62 | 
63 |
64 |
65 | -
66 |
67 |
指南针
68 | 
69 |
70 |
71 |
72 |
unicode引用
73 |
74 |
75 |
unicode是字体在网页端最原始的应用方式,特点是:
76 |
77 | - 兼容性最好,支持ie6+,及所有现代浏览器。
78 | - 支持按字体的方式去动态调整图标大小,颜色等等。
79 | - 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
80 |
81 |
82 | 注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
83 |
84 |
unicode使用步骤如下:
85 |
第一步:拷贝项目下面生成的font-face
86 |
@font-face {
87 | font-family: 'iconfont';
88 | src: url('iconfont.eot');
89 | src: url('iconfont.eot?#iefix') format('embedded-opentype'),
90 | url('iconfont.woff') format('woff'),
91 | url('iconfont.ttf') format('truetype'),
92 | url('iconfont.svg#iconfont') format('svg');
93 | }
94 |
95 |
第二步:定义使用iconfont的样式
96 |
.iconfont{
97 | font-family:"iconfont" !important;
98 | font-size:16px;font-style:normal;
99 | -webkit-font-smoothing: antialiased;
100 | -webkit-text-stroke-width: 0.2px;
101 | -moz-osx-font-smoothing: grayscale;
102 | }
103 |
104 |
第三步:挑选相应图标并获取字体编码,应用于页面
105 |
<i class="iconfont">3</i>
106 |
107 |
108 | "iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。
109 |
110 |
111 |
112 |
113 |
114 |
115 |
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/fontico/iconfont.css:
--------------------------------------------------------------------------------
1 |
2 | @font-face {font-family: "iconfont";
3 | src: url('iconfont.eot?t=1530941487034'); /* IE9*/
4 | src: url('iconfont.eot?t=1530941487034#iefix') format('embedded-opentype'), /* IE6-IE8 */
5 | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
6 | url('iconfont.ttf?t=1530941487034') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
7 | url('iconfont.svg?t=1530941487034#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-fire:before { content: "\e729"; }
19 |
20 | .icon-pengyouquan:before { content: "\e63f"; }
21 |
22 | .icon-wode-active:before { content: "\e67b"; }
23 |
24 | .icon-tongxunlu:before { content: "\e8fb"; }
25 |
26 | .icon-zhinanzhen:before { content: "\e649"; }
27 |
28 | .icon-zhinanzhen1:before { content: "\e610"; }
29 |
30 |
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/fontico/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/fontico/iconfont.eot
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/fontico/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/fontico/iconfont.ttf
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/fontico/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/fontico/iconfont.woff
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/fonts/mui.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/fonts/mui.ttf
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/image/addfriends.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/image/addfriends.png
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/image/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/image/bg.png
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/image/download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/image/download.png
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/image/error.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/image/error.png
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/image/face-default-cat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/image/face-default-cat.png
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/image/friends.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/image/friends.png
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/image/givememoney.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/image/givememoney.png
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/image/good.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/image/good.png
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/image/qrcode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/image/qrcode.png
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/image/scanscan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/image/scanscan.png
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/image/success.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/image/success.png
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/image/upload.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShimmerPig/PigChat/d93c860853ec8ff66b56bb528bf9eac753814392/前端UI代码/imooc-zhuxin/image/upload.png
--------------------------------------------------------------------------------
/前端UI代码/imooc-zhuxin/imooc-discover.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |