Skip to content

Commit 58bc082

Browse files
PekoPPTPekoPPT
authored
chore(fonticons): update details and demos related to font icons (#462)
1 parent 4bc9a88 commit 58bc082

File tree

12 files changed

+732
-671
lines changed

12 files changed

+732
-671
lines changed

‎docs/styling/examples/icons/actions/main.html‎

Lines changed: 76 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
9+
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
10+
crossorigin="anonymous"
11+
/>
12+
<link
13+
rel="stylesheet"
14+
href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css"
15+
/>
316

417
<head>
518
<meta charset="UTF-8">
@@ -9,79 +22,79 @@
922
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
1023

1124
<style>
12-
.WebComponentsIcons {
13-
list-style: none;
14-
margin: 0;
15-
padding: 0;
16-
}
25+
.WebComponentsIcons {
26+
list-style: none;
27+
margin: 0;
28+
padding: 0;
29+
}
1730

18-
.WebComponentsIcons::after {
19-
content: "";
20-
display: block;
21-
clear: both;
22-
height: 0;
23-
line-height: 0;
24-
}
31+
.WebComponentsIcons::after {
32+
content: "";
33+
display: block;
34+
clear: both;
35+
height: 0;
36+
line-height: 0;
37+
}
2538

26-
.WebComponentsIcons li {
27-
margin: 10px;
28-
padding: 10px;
29-
display: block;
30-
float: left;
31-
vertical-align: top;
32-
text-align: center;
33-
width: 160px;
34-
height: 92px;
35-
font-size: 12px;
36-
line-height: 1em;
37-
font-weight: 300;
38-
color: #999;
39-
}
39+
.WebComponentsIcons li {
40+
margin: 10px;
41+
padding: 10px;
42+
display: block;
43+
float: left;
44+
vertical-align: top;
45+
text-align: center;
46+
width: 160px;
47+
height: 92px;
48+
font-size: 12px;
49+
line-height: 1em;
50+
font-weight: 300;
51+
color: #999;
52+
}
4053

41-
.WebComponentsIcons li:before {
42-
display: none;
43-
}
54+
.WebComponentsIcons li:before {
55+
display: none;
56+
}
4457

45-
.WebComponentsIcons .k-icon {
46-
display: block;
47-
clear: both;
48-
margin: 0 auto 10px;
49-
color: #656565;
50-
font-size: 32px;
51-
}
58+
.WebComponentsIcons .k-icon.k-font-icon {
59+
display: block;
60+
clear: both;
61+
margin: 0 auto 10px;
62+
color: #656565;
63+
font-size: 32px;
64+
}
5265

53-
.obsolete-classes {
54-
width: 100%;
55-
max-width: 900px;
56-
text-align: left;
57-
border-collapse: collapse;
58-
}
66+
.obsolete-classes {
67+
width: 100%;
68+
max-width: 900px;
69+
text-align: left;
70+
border-collapse: collapse;
71+
}
5972

60-
.obsolete-classes th,
61-
.obsolete-classes td {
62-
padding: 10px 0;
63-
border-bottom: 1px solid #ececec;
64-
}
73+
.obsolete-classes th,
74+
.obsolete-classes td {
75+
padding: 10px 0;
76+
border-bottom: 1px solid #ececec;
77+
}
6578

66-
.obsolete-classes th {
67-
padding: 0 0 5px;
68-
}
79+
.obsolete-classes th {
80+
padding: 0 0 5px;
81+
}
6982

70-
.old-class {
71-
color: #f31700;
72-
}
83+
.old-class {
84+
color: #f31700;
85+
}
7386

74-
.new-class {
75-
color: #5ec232;
76-
}
87+
.new-class {
88+
color: #5ec232;
89+
}
7790

78-
.ref-icon {
79-
width: 60px;
80-
}
91+
.ref-icon {
92+
width: 60px;
93+
}
8194
</style>
82-
</head>
95+
</head>
8396

84-
<body>
97+
<body>
8598
<ul class="WebComponentsIcons">
8699
<li><span class="k-icon k-font-icon k-i-undo"></span> .k-i-undo</li>
87100
<li><span class="k-icon k-font-icon k-i-redo"></span> .k-i-redo</li>
@@ -156,6 +169,5 @@
156169
<li><span class="k-icon k-font-icon k-i-plus-sm"></span> .k-i-plus-sm</li>
157170
<li><span class="k-icon k-font-icon k-i-minus-sm"></span> .k-i-minus-sm</li>
158171
</ul>
159-
</body>
160-
161-
</html>
172+
</body>
173+
</html>

‎docs/styling/examples/icons/alerts-n-notifications/main.html‎

Lines changed: 75 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
9+
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
10+
crossorigin="anonymous"
11+
/>
12+
<link
13+
rel="stylesheet"
14+
href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css"
15+
/>
316

417
<head>
518
<meta charset="UTF-8">
@@ -9,79 +22,79 @@
922
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
1023

1124
<style>
12-
.WebComponentsIcons {
13-
list-style: none;
14-
margin: 0;
15-
padding: 0;
16-
}
25+
.WebComponentsIcons {
26+
list-style: none;
27+
margin: 0;
28+
padding: 0;
29+
}
1730

18-
.WebComponentsIcons::after {
19-
content: "";
20-
display: block;
21-
clear: both;
22-
height: 0;
23-
line-height: 0;
24-
}
31+
.WebComponentsIcons::after {
32+
content: "";
33+
display: block;
34+
clear: both;
35+
height: 0;
36+
line-height: 0;
37+
}
2538

26-
.WebComponentsIcons li {
27-
margin: 10px;
28-
padding: 10px;
29-
display: block;
30-
float: left;
31-
vertical-align: top;
32-
text-align: center;
33-
width: 160px;
34-
height: 92px;
35-
font-size: 12px;
36-
line-height: 1em;
37-
font-weight: 300;
38-
color: #999;
39-
}
39+
.WebComponentsIcons li {
40+
margin: 10px;
41+
padding: 10px;
42+
display: block;
43+
float: left;
44+
vertical-align: top;
45+
text-align: center;
46+
width: 160px;
47+
height: 92px;
48+
font-size: 12px;
49+
line-height: 1em;
50+
font-weight: 300;
51+
color: #999;
52+
}
4053

41-
.WebComponentsIcons li:before {
42-
display: none;
43-
}
54+
.WebComponentsIcons li:before {
55+
display: none;
56+
}
4457

45-
.WebComponentsIcons .k-icon {
46-
display: block;
47-
clear: both;
48-
margin: 0 auto 10px;
49-
color: #656565;
50-
font-size: 32px;
51-
}
58+
.WebComponentsIcons .k-icon.k-font-icon {
59+
display: block;
60+
clear: both;
61+
margin: 0 auto 10px;
62+
color: #656565;
63+
font-size: 32px;
64+
}
5265

53-
.obsolete-classes {
54-
width: 100%;
55-
max-width: 900px;
56-
text-align: left;
57-
border-collapse: collapse;
58-
}
66+
.obsolete-classes {
67+
width: 100%;
68+
max-width: 900px;
69+
text-align: left;
70+
border-collapse: collapse;
71+
}
5972

60-
.obsolete-classes th,
61-
.obsolete-classes td {
62-
padding: 10px 0;
63-
border-bottom: 1px solid #ececec;
64-
}
73+
.obsolete-classes th,
74+
.obsolete-classes td {
75+
padding: 10px 0;
76+
border-bottom: 1px solid #ececec;
77+
}
6578

66-
.obsolete-classes th {
67-
padding: 0 0 5px;
68-
}
79+
.obsolete-classes th {
80+
padding: 0 0 5px;
81+
}
6982

70-
.old-class {
71-
color: #f31700;
72-
}
83+
.old-class {
84+
color: #f31700;
85+
}
7386

74-
.new-class {
75-
color: #5ec232;
76-
}
87+
.new-class {
88+
color: #5ec232;
89+
}
7790

78-
.ref-icon {
79-
width: 60px;
80-
}
91+
.ref-icon {
92+
width: 60px;
93+
}
8194
</style>
82-
</head>
95+
</head>
8396

84-
<body>
97+
<body>
8598
<ul class="WebComponentsIcons">
8699
<li><span class="k-icon k-font-icon k-i-notification"></span> .k-i-notification<br /> .k-i-bell</li>
87100
<li><span class="k-icon k-font-icon k-i-information"></span> .k-i-information<br /> .k-i-info</li>
@@ -90,4 +103,4 @@
90103
</ul>
91104
</body>
92105

93-
</html>
106+
</html>

0 commit comments

Comments
 (0)