WP SVG Icons - Version 1.3

Version Description

October 19th, 2013 * Added a new expansion section * Added 1 new rounded linked in icon

Download this release

Release Info

Developer eherman24
Plugin Icon 128x128 WP SVG Icons
Version 1.3
Comparing to
See all releases

Code changes from version 1.2 to 1.3

Files changed (13) hide show
  1. includes/css/icon-font/wp-svg-plugin-icon-set1-expansion.eot +0 -0
  2. includes/css/icon-font/wp-svg-plugin-icon-set1-expansion.svg +11 -0
  3. includes/css/icon-font/wp-svg-plugin-icon-set1-expansion.ttf +0 -0
  4. includes/css/icon-font/wp-svg-plugin-icon-set1-expansion.woff +0 -0
  5. includes/css/wordpress-svg-icon-plugin-expansion-style.css +40 -0
  6. includes/css/wordpress-svg-icon-plugin-style.css +1 -0
  7. includes/error_log +1 -1
  8. includes/images/New-Logo.png +0 -0
  9. includes/js/style.css +397 -397
  10. includes/js/wordpress-svg-icon-plugin-scripts.js +18 -1
  11. includes/scripts.php +21 -11
  12. readme.txt +179 -156
  13. wordpress-svg-icons-plugin.php +19 -4
includes/css/icon-font/wp-svg-plugin-icon-set1-expansion.eot ADDED
Binary file
includes/css/icon-font/wp-svg-plugin-icon-set1-expansion.svg ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3
+ <svg xmlns="http://www.w3.org/2000/svg">
4
+ <metadata>Generated by IcoMoon</metadata>
5
+ <defs>
6
+ <font id="wp-svg-plugin-icon-set1-expansion" horiz-adv-x="1024">
7
+ <font-face units-per-em="1024" ascent="960" descent="-64" />
8
+ <missing-glyph horiz-adv-x="1024" />
9
+ <glyph unicode="&#x20;" d="" horiz-adv-x="512" />
10
+ <glyph unicode="&#xe600;" d="M917.326 432.341c-0.135-224.213-180.274-403.783-405.077-403.812-225.685-0.021-405.739 180.871-405.468 407.353 0.277 226.332 179.94 403.492 408.903 403.2 223.886-0.292 401.785-180.452 401.643-406.741zM458.681 377.472c0.974-0.007 1.941-0.007 2.916-0.007 0-31.972 1.856-64.085-0.469-95.886-2.894-39.495 20.743-39.78 49.515-40.647 31.275-0.953 46.322 8.448 44.352 42.212-2.055 35.406-0.732 71.026-0.299 106.546 0.448 36.715 18.012 60.892 44.38 62.308 27.179 1.465 46.905-23.801 47.687-62.955 0.761-37.881 1.287-75.812 0.107-113.664-1.060-33.927 20.501-34.524 44.679-33.934 23.716 0.576 49.465-4.004 48.619 33.529-1.060 47.339 0.846 94.763-0.597 142.080-2.823 92.217-81.244 135.972-162.091 91.406-6.571-3.627-13.774-14.677-21.106-4.956-21.17 28.039-50.204 12.679-75.705 15.068-18.34 1.721-23.061-9.927-22.407-27.598 1.387-37.788 0.42-75.669 0.42-113.5zM313.152 381.86c0.050 0 0.092 0 0.142 0 0-36.693 0.171-73.394-0.064-110.094-0.135-20.601 9.394-30.656 30.215-30.101 13.013 0.348 26.048 0.313 39.061 0.043 21.227-0.448 29.589 10.709 29.54 30.855-0.185 72.213-0.185 144.434-0.028 216.647 0.043 20.601-9.458 30.649-30.258 30.073-11.833-0.32-23.701-0.498-35.506 0.142-24.754 1.337-33.721-11.157-33.259-34.56 0.654-34.325 0.156-68.672 0.156-103.004zM363.705 556.48c26.219 0.768 48.825 24.441 48.754 51.044-0.078 28.004-21.106 46.94-51.271 46.144-30.258-0.789-49.351-20.21-48.284-49.088 1.031-27.797 23.339-48.91 50.802-48.1z" />
11
+ </font></defs></svg>
includes/css/icon-font/wp-svg-plugin-icon-set1-expansion.ttf ADDED
Binary file
includes/css/icon-font/wp-svg-plugin-icon-set1-expansion.woff ADDED
Binary file
includes/css/wordpress-svg-icon-plugin-expansion-style.css ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @font-face {
2
+ font-family: 'wp-svg-plugin-icon-set1-expansion';
3
+ src:url('icon-font/wp-svg-plugin-icon-set1-expansion.eot');
4
+ src:url('icon-font/wp-svg-plugin-icon-set1-expansion.eot?#iefix') format('embedded-opentype'),
5
+ url('icon-font/wp-svg-plugin-icon-set1-expansion.woff') format('woff'),
6
+ url('icon-font/wp-svg-plugin-icon-set1-expansion.ttf') format('truetype'),
7
+ url('icon-font/wp-svg-plugin-icon-set1-expansion.svg#wp-svg-plugin-icon-set1') format('svg');
8
+ font-weight: normal;
9
+ font-style: normal;
10
+ }
11
+
12
+ [class*="wp-svg-icon-set1-expansion-"] {
13
+ font-family: 'wp-svg-plugin-icon-set1-expansion';
14
+ speak: none;
15
+ font-style: normal;
16
+ font-weight: normal;
17
+ font-variant: normal;
18
+ text-transform: none;
19
+ line-height: 1;
20
+
21
+ /* Better Font Rendering =========== */
22
+ -webkit-font-smoothing: antialiased;
23
+ -moz-osx-font-smoothing: grayscale;
24
+ }
25
+
26
+
27
+ .wp-svg-icon-set1-expansion-linkedin_circle {
28
+ font-family: 'wp-svg-plugin-icon-set1-expansion';
29
+ speak: none;
30
+ font-style: normal;
31
+ font-weight: normal;
32
+ font-variant: normal;
33
+ text-transform: none;
34
+ line-height: 1;
35
+ -webkit-font-smoothing: antialiased;
36
+ }
37
+
38
+ .wp-svg-icon-set1-expansion-linkedin_circle:before {
39
+ content: "\e600";
40
+ }
includes/css/wordpress-svg-icon-plugin-style.css CHANGED
@@ -9,6 +9,7 @@
9
  font-style: normal;
10
  }
11
 
 
12
  /* Use the following CSS code if you want to use data attributes for inserting your icons */
13
  [data-icon]:before {
14
  font-family: 'wp-svg-plugin-icon-set1';
9
  font-style: normal;
10
  }
11
 
12
+
13
  /* Use the following CSS code if you want to use data attributes for inserting your icons */
14
  [data-icon]:before {
15
  font-family: 'wp-svg-plugin-icon-set1';
includes/error_log CHANGED
@@ -1 +1 @@
1
- [16-May-2013 17:13:01] PHP Fatal error: Call to undefined function getelementbyid() in /home6/evanherm/public_html/wp-content/plugins/WP2YT-Uploader/includes/process.php on line 9
1
+ [16-May-2013 17:13:01] PHP Fatal error: Call to undefined function getelementbyid() in /home6/evanherm/public_html/wp-content/plugins/WP2YT-Uploader/includes/process.php on line 9
includes/images/New-Logo.png ADDED
Binary file
includes/js/style.css CHANGED
@@ -1,398 +1,398 @@
1
- * {
2
- -webkit-box-sizing: border-box;
3
- -moz-box-sizing: border-box;
4
- box-sizing: border-box;
5
- }
6
-
7
- body {
8
- margin: 0;
9
- background: #282828;
10
- color: #eee;
11
- font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
12
- font-size: 14px;
13
- }
14
-
15
- h1, h2, h3, h4, h5, h6 {
16
- margin: 10px 0;
17
- font-weight: 200;
18
- }
19
-
20
- h2 {
21
- font-size: 1.8em;
22
- font-weight: 200;
23
- color: #888;
24
- letter-spacing: 1px;
25
- }
26
-
27
- section {
28
- margin-bottom: 20px;
29
- }
30
-
31
- p {
32
- margin: 0;
33
- line-height: 1.5;
34
- font-weight: 200;
35
- }
36
-
37
- a {
38
- color: #00aaee;
39
- text-decoration: none;
40
- }
41
-
42
- a:hover {
43
- color: #0077a2;
44
- text-decoration: underline;
45
- }
46
-
47
- .hide {
48
- display: none;
49
- }
50
-
51
- .decal {
52
- height: 2px;
53
- background-color: #000;
54
- border-bottom: 1px solid #333;
55
- }
56
-
57
- .container {
58
- max-width: 940px;
59
- margin-right: auto;
60
- margin-left: auto;
61
- }
62
-
63
- /* EFFECTS
64
- ***************/
65
-
66
- .glow {
67
- text-shadow: 0 0 0 rgba(0, 0, 0, 0);
68
- -webkit-transition: text-shadow 1s linear;
69
- -moz-transition: text-shadow 1s linear;
70
- -o-transition: text-shadow 1s linear;
71
- transition: text-shadow 1s linear;
72
- }
73
-
74
- .glow.in {
75
- text-shadow:
76
- 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8),
77
- 0 0 0.5em rgba(255, 255, 255, 0.3);
78
- }
79
-
80
- .fade {
81
- opacity: 0;
82
- -webkit-transition: opacity 1s linear;
83
- -moz-transition: opacity 1s linear;
84
- -o-transition: opacity 1s linear;
85
- transition: opacity 1s linear;
86
- }
87
-
88
- .fade.in {
89
- opacity: 1;
90
- }
91
-
92
- /* BUTTONS
93
- ***************/
94
-
95
- .btn {
96
- color: #fff;
97
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
98
- display: inline-block;
99
- text-decoration: none;
100
- font-weight: 200;
101
- text-align: center;
102
- vertical-align: middle;
103
- cursor: pointer;
104
- border-radius: 0.5em;
105
- padding: 0.8em 1.2em;
106
- background-color: #ED303C;
107
- background-image: -moz-linear-gradient(top, #ED303C, #8D121A);
108
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ED303C), to(#8D121A));
109
- background-image: -webkit-linear-gradient(top, #ED303C, #8D121A);
110
- background-image: -o-linear-gradient(top, #ED303C, #8D121A);
111
- background-image: linear-gradient(to bottom, #ED303C, #8D121A);
112
- background-repeat: repeat-x;
113
- -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
114
- -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
115
- box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
116
- }
117
-
118
- .btn:hover,
119
- .btn-primary:active,
120
- .btn-primary.active,
121
- .btn-primary.disabled,
122
- .btn-primary[disabled] {
123
- text-decoration: none;
124
- color: #ddd;
125
- background-color: #8D121A;
126
- background-position: 0 -15px;
127
- -webkit-transition: background-position 0.1s linear;
128
- -moz-transition: background-position 0.1s linear;
129
- -o-transition: background-position 0.1s linear;
130
- transition: background-position 0.1s linear;
131
- }
132
-
133
- .btn.active,
134
- .btn:active {
135
- background-image: none;
136
- outline: 0;
137
- -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
138
- -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
139
- box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
140
- }
141
-
142
- /* MARKETING
143
- ***************/
144
-
145
- .jumbotron {
146
- position: relative;
147
- padding: 3em 0;
148
- text-align: center;
149
- background: #242424;
150
- }
151
-
152
- .jumbotron h1 {
153
- color: #fff;
154
- font-family: Rokkitt;
155
- font-size: 13em;
156
- font-weight: 200;
157
- text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8);
158
- visibility: hidden;
159
- }
160
-
161
- .jumbotron h1 .char11 {
162
- color: #ED303C;
163
- }
164
-
165
- .jumbotron p {
166
- margin-top: -1em;
167
- letter-spacing: 0.15em;
168
- color: #ccc;
169
- font-size: 1.25em;
170
- font-weight: 200;
171
- text-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.8);
172
- visibility: hidden;
173
- text-align: center;
174
- }
175
-
176
- .jumbotron .btn {
177
- margin-top: 2em;
178
- margin-bottom: 0.5em;
179
- font-size: 1.6em;
180
- }
181
-
182
- .about {
183
- margin-top: 1em;
184
- }
185
-
186
- .about p {
187
- font-size: 1.2em;
188
- }
189
-
190
- .playground {
191
- background: #242424;
192
- border-radius: 4px;
193
- border: 1px solid #333;
194
- margin-bottom: 10px;
195
- }
196
-
197
- .playground .controls {
198
- margin-bottom: 0;
199
- background: #282828;
200
- border-radius: 0 0 4px 4px;
201
- border: 1px solid #0c0c0c;
202
- border-top: 1px solid #333;
203
- }
204
-
205
- .playground .controls form {
206
- margin-bottom: 0;
207
- padding-bottom: 8px;
208
- }
209
-
210
- .playground .controls select {
211
- width: 50%;
212
- margin-right: 10px;
213
- }
214
-
215
- @media (max-width: 480px) {
216
- .playground .controls select {
217
- width: 100%;
218
- margin-right: 0;
219
- }
220
- }
221
-
222
- .playground .viewport {
223
- display: table;
224
- min-height: 10em;
225
- padding: 20px;
226
- border-radius: 4px 4px 0 0;
227
- border: 1px solid #0c0c0c;
228
- overflow: hidden;
229
- -webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
230
- -moz-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
231
- box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
232
- }
233
-
234
- .playground .viewport .tlt {
235
- color: #fff;
236
- font-size: 1.5em;
237
- font-weight: 200;
238
- letter-spacing: 1px;
239
- padding: 20px 0;
240
- display: inline-block;
241
- vertical-align: middle;
242
- display: table-cell;
243
- text-align: center;
244
- /*visibility: hidden;*/
245
- }
246
-
247
- .deps {
248
- font-size: 1.2em;
249
- }
250
-
251
- .deps ul {
252
- list-style-type: square;
253
- margin: 0;
254
- }
255
-
256
- .deps ul li {
257
- line-height: 1.5em
258
- font-weight: 200;
259
- }
260
-
261
- /* GRID
262
- ***************/
263
-
264
- .grid:after {
265
- content: "";
266
- display: table;
267
- clear: both;
268
- }
269
-
270
- [class*='col-'] {
271
- float: left;
272
- padding-right: 20px;
273
- }
274
- .grid [class*='col-']:last-of-type {
275
- padding-right: 0;
276
- }
277
-
278
- .col-1-1 {
279
- width: 100%;
280
- }
281
-
282
- .col-2-3 {
283
- width: 66.66%;
284
- }
285
-
286
- .col-1-3 {
287
- width: 33.33%;
288
- }
289
-
290
- .col-1-2 {
291
- width: 50%;
292
- }
293
-
294
- .col-1-4 {
295
- width: 25%;
296
- }
297
-
298
- .col-3-4 {
299
- width: 75%;
300
- }
301
-
302
- .col-4-5 {
303
- width: 80%;
304
- }
305
-
306
- .col-1-6 {
307
- width: 16.66%;
308
- }
309
-
310
- .col-1-8 {
311
- width: 12.5%;
312
- }
313
-
314
- .grid-pad {
315
- padding-left: 20px
316
- }
317
-
318
- .grid-pad [class*='col-'] {
319
- padding-top: 20px;
320
- padding-top: 20px;
321
- }
322
-
323
- .grid-pad [class*='col-']:last-of-type {
324
- padding-right: 20px;
325
- }
326
-
327
- @media (max-width: 767px) {
328
- [class*='col-'] {
329
- width: 100%;
330
- }
331
- }
332
-
333
- /* FORM
334
- *********/
335
-
336
- form .control {
337
- margin-bottom: 5px;
338
- }
339
-
340
- select,
341
- input[type="text"] {
342
- width: 100%;
343
- display: inline-block;
344
- height: 30px;
345
- padding: 4px 6px;
346
- margin-bottom: 10px;
347
- font-size: 14px;
348
- line-height: 20px;
349
- color: #555555;
350
- vertical-align: middle;
351
- -webkit-border-radius: 4px;
352
- -moz-border-radius: 4px;
353
- border-radius: 4px;
354
- }
355
-
356
- input[type="text"] {
357
- background-color: #ddd;
358
- border: 1px solid #ccc;
359
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
360
- -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
361
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
362
- -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
363
- -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
364
- -o-transition: border linear 0.2s, box-shadow linear 0.2s;
365
- transition: border linear 0.2s, box-shadow linear 0.2s;
366
- }
367
-
368
- input[type="text"]:focus {
369
- background-color: #fff;
370
- border-color: #8D121A;
371
- outline: 0;
372
- -webkit-box-shadow: inset 0 1px 1px #8D121A, 0 0 8px #ED303C;
373
- -moz-box-shadow: inset 0 1px 1px #8D121A, 0 0 8px #ED303C;
374
- box-shadow: inset 0 1px 1px #8D121A, 0 0 8px #ED303C;
375
- }
376
-
377
- label {
378
- display: block;
379
- margin-bottom: 5px;
380
- }
381
-
382
- label.inline {
383
- display: inline-block;
384
- }
385
-
386
- label.checkbox {
387
- padding: 4px 0;
388
- margin-right: 10px;
389
- white-space: nowrap;
390
- vertical-align: top;
391
- }
392
-
393
- /* CODE
394
- **************/
395
-
396
- pre code {
397
- background: transparent;
398
  }
1
+ * {
2
+ -webkit-box-sizing: border-box;
3
+ -moz-box-sizing: border-box;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ margin: 0;
9
+ background: #282828;
10
+ color: #eee;
11
+ font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
12
+ font-size: 14px;
13
+ }
14
+
15
+ h1, h2, h3, h4, h5, h6 {
16
+ margin: 10px 0;
17
+ font-weight: 200;
18
+ }
19
+
20
+ h2 {
21
+ font-size: 1.8em;
22
+ font-weight: 200;
23
+ color: #888;
24
+ letter-spacing: 1px;
25
+ }
26
+
27
+ section {
28
+ margin-bottom: 20px;
29
+ }
30
+
31
+ p {
32
+ margin: 0;
33
+ line-height: 1.5;
34
+ font-weight: 200;
35
+ }
36
+
37
+ a {
38
+ color: #00aaee;
39
+ text-decoration: none;
40
+ }
41
+
42
+ a:hover {
43
+ color: #0077a2;
44
+ text-decoration: underline;
45
+ }
46
+
47
+ .hide {
48
+ display: none;
49
+ }
50
+
51
+ .decal {
52
+ height: 2px;
53
+ background-color: #000;
54
+ border-bottom: 1px solid #333;
55
+ }
56
+
57
+ .container {
58
+ max-width: 940px;
59
+ margin-right: auto;
60
+ margin-left: auto;
61
+ }
62
+
63
+ /* EFFECTS
64
+ ***************/
65
+
66
+ .glow {
67
+ text-shadow: 0 0 0 rgba(0, 0, 0, 0);
68
+ -webkit-transition: text-shadow 1s linear;
69
+ -moz-transition: text-shadow 1s linear;
70
+ -o-transition: text-shadow 1s linear;
71
+ transition: text-shadow 1s linear;
72
+ }
73
+
74
+ .glow.in {
75
+ text-shadow:
76
+ 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8),
77
+ 0 0 0.5em rgba(255, 255, 255, 0.3);
78
+ }
79
+
80
+ .fade {
81
+ opacity: 0;
82
+ -webkit-transition: opacity 1s linear;
83
+ -moz-transition: opacity 1s linear;
84
+ -o-transition: opacity 1s linear;
85
+ transition: opacity 1s linear;
86
+ }
87
+
88
+ .fade.in {
89
+ opacity: 1;
90
+ }
91
+
92
+ /* BUTTONS
93
+ ***************/
94
+
95
+ .btn {
96
+ color: #fff;
97
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
98
+ display: inline-block;
99
+ text-decoration: none;
100
+ font-weight: 200;
101
+ text-align: center;
102
+ vertical-align: middle;
103
+ cursor: pointer;
104
+ border-radius: 0.5em;
105
+ padding: 0.8em 1.2em;
106
+ background-color: #ED303C;
107
+ background-image: -moz-linear-gradient(top, #ED303C, #8D121A);
108
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ED303C), to(#8D121A));
109
+ background-image: -webkit-linear-gradient(top, #ED303C, #8D121A);
110
+ background-image: -o-linear-gradient(top, #ED303C, #8D121A);
111
+ background-image: linear-gradient(to bottom, #ED303C, #8D121A);
112
+ background-repeat: repeat-x;
113
+ -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
114
+ -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
115
+ box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
116
+ }
117
+
118
+ .btn:hover,
119
+ .btn-primary:active,
120
+ .btn-primary.active,
121
+ .btn-primary.disabled,
122
+ .btn-primary[disabled] {
123
+ text-decoration: none;
124
+ color: #ddd;
125
+ background-color: #8D121A;
126
+ background-position: 0 -15px;
127
+ -webkit-transition: background-position 0.1s linear;
128
+ -moz-transition: background-position 0.1s linear;
129
+ -o-transition: background-position 0.1s linear;
130
+ transition: background-position 0.1s linear;
131
+ }
132
+
133
+ .btn.active,
134
+ .btn:active {
135
+ background-image: none;
136
+ outline: 0;
137
+ -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
138
+ -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
139
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
140
+ }
141
+
142
+ /* MARKETING
143
+ ***************/
144
+
145
+ .jumbotron {
146
+ position: relative;
147
+ padding: 3em 0;
148
+ text-align: center;
149
+ background: #242424;
150
+ }
151
+
152
+ .jumbotron h1 {
153
+ color: #fff;
154
+ font-family: Rokkitt;
155
+ font-size: 13em;
156
+ font-weight: 200;
157
+ text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8);
158
+ visibility: hidden;
159
+ }
160
+
161
+ .jumbotron h1 .char11 {
162
+ color: #ED303C;
163
+ }
164
+
165
+ .jumbotron p {
166
+ margin-top: -1em;
167
+ letter-spacing: 0.15em;
168
+ color: #ccc;
169
+ font-size: 1.25em;
170
+ font-weight: 200;
171
+ text-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.8);
172
+ visibility: hidden;
173
+ text-align: center;
174
+ }
175
+
176
+ .jumbotron .btn {
177
+ margin-top: 2em;
178
+ margin-bottom: 0.5em;
179
+ font-size: 1.6em;
180
+ }
181
+
182
+ .about {
183
+ margin-top: 1em;
184
+ }
185
+
186
+ .about p {
187
+ font-size: 1.2em;
188
+ }
189
+
190
+ .playground {
191
+ background: #242424;
192
+ border-radius: 4px;
193
+ border: 1px solid #333;
194
+ margin-bottom: 10px;
195
+ }
196
+
197
+ .playground .controls {
198
+ margin-bottom: 0;
199
+ background: #282828;
200
+ border-radius: 0 0 4px 4px;
201
+ border: 1px solid #0c0c0c;
202
+ border-top: 1px solid #333;
203
+ }
204
+
205
+ .playground .controls form {
206
+ margin-bottom: 0;
207
+ padding-bottom: 8px;
208
+ }
209
+
210
+ .playground .controls select {
211
+ width: 50%;
212
+ margin-right: 10px;
213
+ }
214
+
215
+ @media (max-width: 480px) {
216
+ .playground .controls select {
217
+ width: 100%;
218
+ margin-right: 0;
219
+ }
220
+ }
221
+
222
+ .playground .viewport {
223
+ display: table;
224
+ min-height: 10em;
225
+ padding: 20px;
226
+ border-radius: 4px 4px 0 0;
227
+ border: 1px solid #0c0c0c;
228
+ overflow: hidden;
229
+ -webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
230
+ -moz-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
231
+ box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
232
+ }
233
+
234
+ .playground .viewport .tlt {
235
+ color: #fff;
236
+ font-size: 1.5em;
237
+ font-weight: 200;
238
+ letter-spacing: 1px;
239
+ padding: 20px 0;
240
+ display: inline-block;
241
+ vertical-align: middle;
242
+ display: table-cell;
243
+ text-align: center;
244
+ /*visibility: hidden;*/
245
+ }
246
+
247
+ .deps {
248
+ font-size: 1.2em;
249
+ }
250
+
251
+ .deps ul {
252
+ list-style-type: square;
253
+ margin: 0;
254
+ }
255
+
256
+ .deps ul li {
257
+ line-height: 1.5em
258
+ font-weight: 200;
259
+ }
260
+
261
+ /* GRID
262
+ ***************/
263
+
264
+ .grid:after {
265
+ content: "";
266
+ display: table;
267
+ clear: both;
268
+ }
269
+
270
+ [class*='col-'] {
271
+ float: left;
272
+ padding-right: 20px;
273
+ }
274
+ .grid [class*='col-']:last-of-type {
275
+ padding-right: 0;
276
+ }
277
+
278
+ .col-1-1 {
279
+ width: 100%;
280
+ }
281
+
282
+ .col-2-3 {
283
+ width: 66.66%;
284
+ }
285
+
286
+ .col-1-3 {
287
+ width: 33.33%;
288
+ }
289
+
290
+ .col-1-2 {
291
+ width: 50%;
292
+ }
293
+
294
+ .col-1-4 {
295
+ width: 25%;
296
+ }
297
+
298
+ .col-3-4 {
299
+ width: 75%;
300
+ }
301
+
302
+ .col-4-5 {
303
+ width: 80%;
304
+ }
305
+
306
+ .col-1-6 {
307
+ width: 16.66%;
308
+ }
309
+
310
+ .col-1-8 {
311
+ width: 12.5%;
312
+ }
313
+
314
+ .grid-pad {
315
+ padding-left: 20px
316
+ }
317
+
318
+ .grid-pad [class*='col-'] {
319
+ padding-top: 20px;
320
+ padding-top: 20px;
321
+ }
322
+
323
+ .grid-pad [class*='col-']:last-of-type {
324
+ padding-right: 20px;
325
+ }
326
+
327
+ @media (max-width: 767px) {
328
+ [class*='col-'] {
329
+ width: 100%;
330
+ }
331
+ }
332
+
333
+ /* FORM
334
+ *********/
335
+
336
+ form .control {
337
+ margin-bottom: 5px;
338
+ }
339
+
340
+ select,
341
+ input[type="text"] {
342
+ width: 100%;
343
+ display: inline-block;
344
+ height: 30px;
345
+ padding: 4px 6px;
346
+ margin-bottom: 10px;
347
+ font-size: 14px;
348
+ line-height: 20px;
349
+ color: #555555;
350
+ vertical-align: middle;
351
+ -webkit-border-radius: 4px;
352
+ -moz-border-radius: 4px;
353
+ border-radius: 4px;
354
+ }
355
+
356
+ input[type="text"] {
357
+ background-color: #ddd;
358
+ border: 1px solid #ccc;
359
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
360
+ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
361
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
362
+ -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
363
+ -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
364
+ -o-transition: border linear 0.2s, box-shadow linear 0.2s;
365
+ transition: border linear 0.2s, box-shadow linear 0.2s;
366
+ }
367
+
368
+ input[type="text"]:focus {
369
+ background-color: #fff;
370
+ border-color: #8D121A;
371
+ outline: 0;
372
+ -webkit-box-shadow: inset 0 1px 1px #8D121A, 0 0 8px #ED303C;
373
+ -moz-box-shadow: inset 0 1px 1px #8D121A, 0 0 8px #ED303C;
374
+ box-shadow: inset 0 1px 1px #8D121A, 0 0 8px #ED303C;
375
+ }
376
+
377
+ label {
378
+ display: block;
379
+ margin-bottom: 5px;
380
+ }
381
+
382
+ label.inline {
383
+ display: inline-block;
384
+ }
385
+
386
+ label.checkbox {
387
+ padding: 4px 0;
388
+ margin-right: 10px;
389
+ white-space: nowrap;
390
+ vertical-align: top;
391
+ }
392
+
393
+ /* CODE
394
+ **************/
395
+
396
+ pre code {
397
+ background: transparent;
398
  }
includes/js/wordpress-svg-icon-plugin-scripts.js CHANGED
@@ -5,20 +5,37 @@
5
  jQuery(document).ready(function(){
6
 
7
  jQuery('.glyph').hover(function(){ jQuery('.glyph').css('cursor','pointer'); });
 
8
  jQuery('input[type=text].glyph_unicode').click(buttonClick);
 
9
  jQuery('.glyph').click(buttonClick);
 
10
 
11
  function buttonClick() {
12
  var glyphUnicode = jQuery('input[type=text].glyph_unicode', this).val();
13
 
14
  jQuery('.fs1').css('color','#292929');
15
- jQuery('input[type=text].copy_paste_input').val('<span data-icon="'+ glyphUnicode + '"></span>');
 
16
  jQuery('input[type=text].glyph_unicode').css('background-color','#eee');
17
  jQuery('input[type=text].glyph_unicode', this).css('background-color','#FF8000', 'font-color', '#000');
18
  jQuery('.fs1', this).css('color','#FF8000');
19
  jQuery('.wp-svg-icon-preview').html('<div class="wp-svg-iconset1-preview" data-icon="'+ glyphUnicode + '"></div>');
20
  jQuery('html, body').animate({ scrollTop: 0 }, 'slow');
21
  };
 
 
 
 
 
 
 
 
 
 
 
 
 
22
 
23
 
24
  });
5
  jQuery(document).ready(function(){
6
 
7
  jQuery('.glyph').hover(function(){ jQuery('.glyph').css('cursor','pointer'); });
8
+ jQuery('.expansion-Glyph').hover(function(){ jQuery('.expansion-Glyph').css('cursor','pointer'); });
9
  jQuery('input[type=text].glyph_unicode').click(buttonClick);
10
+ jQuery('input[type=text].expansion_glyph_unicode').click(expansionButtonClick);
11
  jQuery('.glyph').click(buttonClick);
12
+ jQuery('.expansion-Glyph').click(expansionButtonClick);
13
 
14
  function buttonClick() {
15
  var glyphUnicode = jQuery('input[type=text].glyph_unicode', this).val();
16
 
17
  jQuery('.fs1').css('color','#292929');
18
+ jQuery('input[type=text].copy_paste_input').val('<span data-icon="'+glyphUnicode + '"></span>');
19
+ jQuery('input[type=text].expansion_glyph_unicode').css('background-color','#eee');
20
  jQuery('input[type=text].glyph_unicode').css('background-color','#eee');
21
  jQuery('input[type=text].glyph_unicode', this).css('background-color','#FF8000', 'font-color', '#000');
22
  jQuery('.fs1', this).css('color','#FF8000');
23
  jQuery('.wp-svg-icon-preview').html('<div class="wp-svg-iconset1-preview" data-icon="'+ glyphUnicode + '"></div>');
24
  jQuery('html, body').animate({ scrollTop: 0 }, 'slow');
25
  };
26
+
27
+ function expansionButtonClick() {
28
+ var glyphUnicode = jQuery('input[type=text].expansion_glyph_unicode', this).val();
29
+
30
+ jQuery('.fs1').css('color','#292929');
31
+ jQuery('input[type=text].copy_paste_input').val('<span class="'+glyphUnicode + '"></span>');
32
+ jQuery('input[type=text].glyph_unicode').css('background-color','#eee');
33
+ jQuery('input[type=text].expansion_glyph_unicode').css('background-color','#eee');
34
+ jQuery('input[type=text].expansion_glyph_unicode', this).css('background-color','#FF8000', 'font-color', '#000');
35
+ jQuery('.fs1', this).css('color','#FF8000');
36
+ jQuery('.wp-svg-icon-preview').html('<div class="wp-svg-iconset1-preview"><span class="'+ glyphUnicode + '"></span></div>');
37
+ jQuery('html, body').animate({ scrollTop: 0 }, 'slow');
38
+ };
39
 
40
 
41
  });
includes/scripts.php CHANGED
@@ -1,11 +1,21 @@
1
- <?php
2
-
3
- /***********************************
4
- * SCRIPT CONTROLS
5
- ***********************************/
6
-
7
- function wordpress_svg_icon_plugin_load_style() {
8
- wp_register_style( 'svg-icon-set1-style', plugin_dir_url(__FILE__).'css/wordpress-svg-icon-plugin-style.css');
9
- }
10
- add_action( 'wp_enqueue_scripts', 'wordpress_svg_icon_plugin_load_style' );
11
- function wordpress_svg_icon_plugin_load_style_dashboard() {
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+
3
+ /***********************************
4
+ * SCRIPT CONTROLS
5
+ ***********************************/
6
+
7
+ function wordpress_svg_icon_plugin_load_style() {
8
+ wp_register_style( 'svg-icon-set1-style', plugin_dir_url(__FILE__).'css/wordpress-svg-icon-plugin-style.css');
9
+ wp_enqueue_style( 'svg-icon-set1-style' );
10
+ wp_register_style( 'svg-icon-set1-expansion-style', plugin_dir_url(__FILE__).'css/wordpress-svg-icon-plugin-expansion-style.css');
11
+ wp_enqueue_style( 'svg-icon-set1-expansion-style' );
12
+ }
13
+ add_action( 'wp_enqueue_scripts', 'wordpress_svg_icon_plugin_load_style' );
14
+
15
+ function wordpress_svg_icon_plugin_load_style_dashboard() {
16
+ wp_register_style( 'svg-icon-set1-style-dashboard', plugin_dir_url(__FILE__).'css/wordpress-svg-icon-plugin-style.css');
17
+ wp_enqueue_style( 'svg-icon-set1-style-dashboard' );
18
+ wp_register_style( 'svg-icon-set1-expansion-style-dashboard', plugin_dir_url(__FILE__).'css/wordpress-svg-icon-plugin-expansion-style.css');
19
+ wp_enqueue_style( 'svg-icon-set1-expansion-style-dashboard' );
20
+ }
21
+ add_action( 'admin_enqueue_scripts', 'wordpress_svg_icon_plugin_load_style_dashboard' );
readme.txt CHANGED
@@ -1,157 +1,180 @@
1
- === WordPress Icons - SVG ===
2
- Contributors: eherman24
3
- Donate link: http://evan-herman.com/
4
- Tags: wordpress, icons, evan, herman, icon, set, svg, wp, icomoon, ico, moon, wp, zoom, wp-zoom, wpzoom, broccolidry, metoicons, iconic, plugin, responsive, bootstrap, font, awesome, font awesome, twitter, glyphicons, glyph, web, font, webfont
5
- Requires at least: 3.0.1
6
- Tested up to: 3.6
7
- Stable tag: 1.2
8
- License: GPLv2 or later
9
- License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
-
11
- This plugin will install 500+ SVG glyph icons for use on your site. Users can use the provided code in posts, themes and templates.
12
-
13
- == Description ==
14
- **Demo Page**
15
- <a href="http://evan-herman.com/wp-svg-icon-set-1-example/">Check out the Included Icons</a>
16
-
17
- I originally created this plugin for my own personal use on client projects. After witnessing the power of this plugin first hand, I wanted
18
- to give a little something back to the community who have helped me through the years. The 'WordPress SVG Icon Set' is extremely
19
- easy for any one to use. Two clicks of the mouse and you have an icon ready to be placed on to your site.
20
-
21
- These icons are a set of web-fonts, and are extremely scale-able. Meaning they will not degrade in quality the larger they get. Another
22
- great feature of this plugin is the ability to use the same icons across all devices. No need to generate Retina specific images for retina
23
- ready devices. By setting a max-width on the icon, it then becomes responsive.
24
-
25
- This plugin is also great for developers who use icons on multiple sites and want to avoid the hassle of re-installing
26
- web fonts on to a new server every time. With this plugin its one click and you're ready to begin working. You can use
27
- these any where in your themes.
28
-
29
- **Features**
30
-
31
- * OVER 500 ICONS INCLUDED
32
- * Insert Icons Directly Into Posts
33
- * Pro Version in Development with Customization Features
34
-
35
- **Usage**
36
- To include an icon on to any page of your site, simply click on the icon that you want to use and copy the provided code.
37
- The icon code will look like the following:
38
- `<div data-icon="&#xe016;"></div>`
39
-
40
- It is also extremely simple to change the size of the icon . To do so, just add an inline font-size property to the div that is holding your icon.
41
- *For example:*
42
- `<div data-icon="&#xe016;" style="font-size:3em;"></div>`
43
- Will increase the icon size to 3em. You may also specify 'px' or '%' as the measurement.
44
-
45
- You may also change the color of the icon, for when you need to stick to a color scheme.
46
- *For example:*
47
- `<div data-icon="&#xe016;" style="color:#007ab7"></div>`
48
- Will change the icon color to blue.
49
-
50
- Another great feature is the ability to add CSS3 animation, such as color fade on hover. This is acheived by first adding an ID or class to the icon and utilizing the CSS3 pseudo classes.
51
- You can add the style directly before the icon, or you can simply add it to your existing CSS3 Stylesheet.
52
- *For example:*
53
- CSS3 Code
54
- `<style>#pac-man-icon:hover { color: #d9f200; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; }</style>`
55
- Icon Code
56
- `<div data-icon="&#xe016;" id="pac-man-icon"></div>`
57
- Will create a PacMan Icon, give it the ID of pac-man-icon, and assign the :hover pseudo class to the icon.
58
- When a user hovers over the icon, the icon will then fade colors to an appropriate PacMan yellow over .5 seconds.
59
-
60
- These icons can also be used inside of buttons, dropdowns, menu items, unordered lists, category icons. The use is endless.
61
- For my final example I wanted to show how the icons can be used inside of a button.
62
- *For example:*
63
- `<button class="button-secondary"><div data-icon="&#xe016;" id="pac-man-icon"> This is my PacMan Button</div></button>`
64
- This will create a very nice looking button with your Icon to the left hand side of the button with the text' This is my PacMan Button'.
65
- *note: button-secondary is a class to assign to buttons on the admin dashboard of your site, it will not look great on the front end.*
66
-
67
- *Developing plugins is long and tedious work. If you benefit or enjoy this plugin please take the time to rate
68
- and review it, as this will only make future iterations of it better.*
69
-
70
- **Special Thanks Goes To:**
71
-
72
- * [IcoMoon](http://www.icomoon.io) for an amazing base set of free icon's for use, many in this plugin.
73
- * [Alessio Atzeni](http://www.alessioatzeni.com/) for the inclusion of a few 'Metoicons' icons in this plugin.
74
- * [PJ Onori](http://somerandomdude.com) for the inclusion of a few 'Iconic' icons in this plugin.
75
-
76
- **and of course**
77
-
78
- * [Matt Mullenweg](http://www.ma.tt/) for everything he does for the WordPress community. Without him none of this would be possible.
79
-
80
- == Installation ==
81
- 1. Upload `plugin-name.php` to the `/wp-content/plugins/` directory
82
- 2. Activate the plugin through the 'Plugins' menu in WordPress
83
- 3. Go to the 'WP SVG Icon' plugin page in the dashboard
84
- 4. Click on which icon you would like to use
85
- 5. A preview of the icon will then appear in the preview box at the top. Copy the generated code out of the 'example' box.
86
- 6. You may now paste the copied code anywhere you want the icon to appear. (even in posts or anywhere in your themes)
87
-
88
- == Frequently Asked Questions ==
89
-
90
- = When I include the provided code in a post, all that appears is the code. No icon appears. Why? =
91
-
92
- Make sure that you are entering the provided code in the 'text' section of the post editor. If you are putting the code into the 'visual' editor, it will not work.
93
-
94
- = Will these plugins loose quality as they scale up? =
95
-
96
- No. These icons are not .png or .jpg format. They are .svg (scalable vector graphics), which means you can scale them
97
- as large as you want with out any loss in quality.
98
-
99
- = Can you change the color of the icons? =
100
-
101
- Yes, by specifying an in-line color property to the div.
102
-
103
- = Can you add animations to the icons? =
104
-
105
- Yes, but you will need to know how to code CSS3 animations.
106
-
107
- = What is so different between the free and the pro version? =
108
-
109
- The pro version was built with ease of use for the end user in mind. The pro version comes with an icon customization window where users
110
- can much more easily change the icon size and icon color. The customization window also features 59 pre-built CSS3 animations
111
- which users can add to any icon in the library. On top of that users can choose when to animate the icon from options such as
112
- 'On Load', 'On Hover' and 'On Click'. Within the customization window users can also add a drop shadow, or make the icon appear 3D
113
- with just one click, all while watching the changes in real time within the 'Icon Preview Window'. Users also hve the ability to turn the icon
114
- in to a functioning link to an internal or external page. Once the user is content with the final icon design, they click 'Generate
115
- Code' where they are given all the necessary code to place that icon anywhere on your site.
116
-
117
- It's as easy as copy and paste.
118
-
119
- If you buy the pro version you will also receive support for one year, for those times you need to make something out of the ordinary happen.
120
-
121
- = Have a question, idea or found a bug? =
122
-
123
- If you have found any problems, have an idea for a future release, found a bug you would like me to correct or
124
- need light technical support you can reach me by email at <a href="mailto:evanmherman@gmail.com">Evan.M.Herman@gmail.com</a>
125
- or through the contact form on my website at <a href="http://www.Evan-Herman.com">www.Evan-Herman.com</a>.
126
-
127
- == Screenshots ==
128
-
129
- 1. Main plugin screen. Pacman icon selected, generated code visible.
130
- 2. Some more icons included in this plugin.
131
- 3. All included icons in the icon selection screen in the dashboard.
132
-
133
- == Changelog ==
134
- = 1.1 =
135
- * Made it easier to select icons by making the entire div selectable
136
- * Added icon highlighting after selection
137
- * Added smooth scroll back to top
138
- * Placed scripts in external file
139
-
140
- = 1.0 =
141
- * Original Release
142
-
143
- == Upgrade Notice ==
144
- = 1.2 =
145
- * Replaced icon container holder from a <div> to a <span> - fixes line breaks when inserting icons into content
146
-
147
- = 1.1 =
148
- August 2nd, 2013
149
- * Made it easier to select icons by making the entire div selectable
150
- * Added icon highlighting after selection
151
- * Added smooth scroll back to top
152
-
153
- = 1.0 =
154
- Original release - July 20th, 2013.
155
-
156
- == Demo Page ==
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
157
  <p> Check out the <a href="http://evan-herman.com/wp-svg-icon-set-1-example/">demo page</a> before downloading. You can see all the icons that come with this plugin, and more on how to use them!</p>
1
+ === WordPress Icons - SVG ===
2
+ Contributors: eherman24
3
+ Donate link: http://evan-herman.com/
4
+ Tags: wordpress, icons, evan, herman, icon, set, svg, wp, icomoon, ico, moon, wp, zoom, wp-zoom, wpzoom, broccolidry, metoicons, iconic, plugin, responsive, bootstrap, font, awesome, font awesome, twitter, glyphicons, glyph, web, font, webfont
5
+ Requires at least: 3.0.1
6
+ Tested up to: 3.6
7
+ Stable tag: 1.3
8
+ License: GPLv2 or later
9
+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
+
11
+ This plugin will install 500+ SVG glyph icons for use on your site. Users can use the provided code in posts, themes and templates.
12
+
13
+ == Description ==
14
+ **Demo Page**
15
+ <a href="http://evan-herman.com/wp-svg-icon-set-1-example/">Check out the Included Icons</a>
16
+
17
+ I originally created this plugin for my own personal use on client projects. After witnessing the power of this plugin first hand, I wanted
18
+ to give a little something back to the community who have helped me through the years. The 'WordPress SVG Icon Set' is extremely
19
+ easy for any one to use. Two clicks of the mouse and you have an icon ready to be placed on to your site.
20
+
21
+ These icons are a set of web-fonts, and are extremely scale-able. Meaning they will not degrade in quality the larger they get. Another
22
+ great feature of this plugin is the ability to use the same icons across all devices. No need to generate Retina specific images for retina
23
+ ready devices. By setting a max-width on the icon, it then becomes responsive.
24
+
25
+ This plugin is also great for developers who use icons on multiple sites and want to avoid the hassle of re-installing
26
+ web fonts on to a new server every time. With this plugin its one click and you're ready to begin working. You can use
27
+ these any where in your themes.
28
+
29
+ **Features**
30
+
31
+ * OVER 500 ICONS INCLUDED
32
+ * Insert Icons Directly Into Posts
33
+ * Expansion section - updated with new icons frequently
34
+ * Inclusion of user requested icons (with donation)
35
+ * Pro Version in Development - plans to release as unpaid
36
+
37
+ **Usage**
38
+ To include an icon on to any page of your site, simply click on the icon that you want to use and copy the provided code.
39
+ The icon code will look like the following:
40
+ `<div data-icon="&#xe016;"></div>`
41
+
42
+ It is also extremely simple to change the size of the icon . To do so, just add an inline font-size property to the div that is holding your icon.
43
+ *For example:*
44
+ `<div data-icon="&#xe016;" style="font-size:3em;"></div>`
45
+ Will increase the icon size to 3em. You may also specify 'px' or '%' as the measurement.
46
+
47
+ You may also change the color of the icon, for when you need to stick to a color scheme.
48
+ *For example:*
49
+ `<div data-icon="&#xe016;" style="color:#007ab7"></div>`
50
+ Will change the icon color to blue.
51
+
52
+ Another great feature is the ability to add CSS3 animation, such as color fade on hover. This is acheived by first adding an ID or class to the icon and utilizing the CSS3 pseudo classes.
53
+ You can add the style directly before the icon, or you can simply add it to your existing CSS3 Stylesheet.
54
+ *For example:*
55
+ CSS3 Code
56
+ `<style>#pac-man-icon:hover { color: #d9f200; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; }</style>`
57
+ Icon Code
58
+ `<div data-icon="&#xe016;" id="pac-man-icon"></div>`
59
+ Will create a PacMan Icon, give it the ID of pac-man-icon, and assign the :hover pseudo class to the icon.
60
+ When a user hovers over the icon, the icon will then fade colors to an appropriate PacMan yellow over .5 seconds.
61
+
62
+ These icons can also be used inside of buttons, dropdowns, menu items, unordered lists, category icons. The use is endless.
63
+ For my final example I wanted to show how the icons can be used inside of a button.
64
+ *For example:*
65
+ `<button class="button-secondary"><div data-icon="&#xe016;" id="pac-man-icon"> This is my PacMan Button</div></button>`
66
+ This will create a very nice looking button with your Icon to the left hand side of the button with the text' This is my PacMan Button'.
67
+ *note: button-secondary is a class to assign to buttons on the admin dashboard of your site, it will not look great on the front end.*
68
+
69
+ *Developing plugins is long and tedious work. If you benefit or enjoy this plugin please take the time to rate
70
+ and review it, as this will only make future iterations of it better.*
71
+
72
+ **Special Thanks Goes To:**
73
+
74
+ * [IcoMoon](http://www.icomoon.io) for an amazing base set of free icon's for use, many in this plugin.
75
+ * [Alessio Atzeni](http://www.alessioatzeni.com/) for the inclusion of a few 'Metoicons' icons in this plugin.
76
+ * [PJ Onori](http://somerandomdude.com) for the inclusion of a few 'Iconic' icons in this plugin.
77
+
78
+ **and of course**
79
+
80
+ * [Matt Mullenweg](http://www.ma.tt/) for everything he does for the WordPress community. Without him none of this would be possible.
81
+
82
+ == Installation ==
83
+ 1. Upload `wordpress-svg-icons-plugin.zip` to the `/wp-content/plugins/` directory
84
+ 2. Activate the plugin through the 'Plugins' menu in WordPress
85
+ 3. Go to the 'WP SVG Icon' plugin page in the dashboard
86
+ 4. Click on which icon you would like to use
87
+ 5. A preview of the icon will then appear in the preview box at the top. Copy the generated code out of the 'example' box.
88
+ 6. You may now paste the copied code anywhere you want the icon to appear. (even in posts or anywhere in your templates)
89
+
90
+ == Frequently Asked Questions ==
91
+
92
+ = When I include the provided code in a post, all that appears is the code. No icon appears. Why? =
93
+
94
+ Make sure that you are entering the provided code in the 'text' section of the post editor. If you are putting the code into the 'visual' editor, it will not work.
95
+
96
+ = Will these icons loose quality as they scale up? =
97
+
98
+ No. These icons are not .png or .jpg format. They are .svg (scalable vector graphics), which means you can scale them
99
+ as large as you want with out any loss in quality.
100
+
101
+ = Can you change the color of the icons? =
102
+
103
+ Yes, by specifying an in-line color property to the div.
104
+
105
+ = Can you add animations to the icons? =
106
+
107
+ Yes, but you will need to know how to code CSS3 animations.
108
+
109
+ = What is so different between the free and the pro version? =
110
+
111
+ The pro version was built with ease of use for the end user in mind. The pro version comes with an icon customization window where users
112
+ can much more easily change the icon size and icon color. The customization window also features 59 pre-built CSS3 animations
113
+ which users can add to any icon in the library. On top of that users can choose when to animate the icon from options such as
114
+ 'On Load', 'On Hover' and 'On Click'. Within the customization window users can also add a drop shadow, or make the icon appear 3D
115
+ with just one click, all while watching the changes in real time within the 'Icon Preview Window'. Users also hve the ability to turn the icon
116
+ in to a functioning link to an internal or external page. Once the user is content with the final icon design, they click 'Generate
117
+ Code' where they are given all the necessary code to place that icon anywhere on your site.
118
+
119
+ It's as easy as copy and paste.
120
+
121
+ If you buy the pro version you will also receive support for one year, for those times you need to make something out of the ordinary happen.
122
+
123
+ *Note: The pro version is in development and is planned to be released as unpaid*
124
+
125
+ = Have a question, idea or found a bug? =
126
+
127
+ If you have found any problems, have an idea for a future release, found a bug you would like me to correct or
128
+ need light technical support you can reach me by email at <a href="mailto:evanmherman@gmail.com">Evan.M.Herman@gmail.com</a>
129
+ or through the contact form on my website at <a href="http://www.Evan-Herman.com">www.Evan-Herman.com</a>.
130
+
131
+ == Screenshots ==
132
+
133
+ 1. Main plugin screen. Pacman icon selected, generated code visible.
134
+ 2. Some more icons included in this plugin.
135
+ 3. All included icons in the icon selection screen in the dashboard.
136
+ 4. The new expansion section, with the new linked in rounded icon
137
+
138
+ == Changelog ==
139
+ = 1.3 =
140
+ October 19th, 2013
141
+ * Added a new expansion section
142
+ * Added 1 new rounded linked in icon
143
+
144
+ = 1.2 =
145
+ September 20th, 2013
146
+ * Replaced icon container holder from a <div> to a <span> - fixes line breaks when inserting icons into content
147
+
148
+ = 1.1 =
149
+ August 2nd, 2013
150
+ * Made it easier to select icons by making the entire div selectable
151
+ * Added icon highlighting after selection
152
+ * Added smooth scroll back to top
153
+ * Placed scripts in external file
154
+
155
+ = 1.0 =
156
+ July 20th, 2013
157
+ * Original Release
158
+
159
+ == Upgrade Notice ==
160
+ = 1.3 =
161
+ October 19th, 2013
162
+ * Added a new expansion section
163
+ * Added 1 new rounded linked in icon
164
+
165
+ = 1.2 =
166
+ September 20th, 2013
167
+ * Replaced icon container holder from a <div> to a <span> - fixes line breaks when inserting icons into content
168
+
169
+ = 1.1 =
170
+ August 2nd, 2013
171
+ * Made it easier to select icons by making the entire div selectable
172
+ * Added icon highlighting after selection
173
+ * Added smooth scroll back to top
174
+
175
+ = 1.0 =
176
+ July 20th, 2013
177
+ * Original release
178
+
179
+ == Demo Page ==
180
  <p> Check out the <a href="http://evan-herman.com/wp-svg-icon-set-1-example/">demo page</a> before downloading. You can see all the icons that come with this plugin, and more on how to use them!</p>
wordpress-svg-icons-plugin.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: WordPress Icons - SVG
4
  Plugin URI: http://evan-herman.com/wp-svg-icon-set-1-example/
5
  Description: Easily insert svg icons directly in to your WordPress blog with this plugin.
6
- Version: 1.2
7
  Author: Evan Herman
8
  Author URI: http://www.Evan-Herman.com
9
  License:
@@ -73,7 +73,7 @@ function wordpress_svg_icons_cheat_sheet(){
73
  margin: 0;
74
  padding: 0;
75
  }
76
- .glyph {
77
  font-size: 16px;
78
  float: left;
79
  text-align: center;
@@ -84,7 +84,7 @@ function wordpress_svg_icons_cheat_sheet(){
84
  border-radius: .25em;
85
  box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
86
  }
87
- .glyph input {
88
  font-family: consolas, monospace;
89
  font-size: 13px;
90
  width: 100%;
@@ -93,6 +93,7 @@ function wordpress_svg_icons_cheat_sheet(){
93
  box-shadow: 0 0 0 1px #ccc;
94
  padding: .125em;
95
  }
 
96
  .w-main {
97
  width: 95%;
98
  }
@@ -2200,9 +2201,23 @@ function wordpress_svg_icons_cheat_sheet(){
2200
  <a class="glyph-link" href="#"><input class="glyph_unicode" type="text" readonly="readonly" value="&amp;#xe1f3;" > </a>
2201
  </div>
2202
  </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2203
  </div>
2204
  <div class="clear"></div>
2205
-
2206
  <footer>
2207
  <p>Plugin Created By <a style="color:#B35047;" href="http://www.Evan-Herman.com" target="_blank">Evan Herman</a></p>
2208
  </footer>
3
  Plugin Name: WordPress Icons - SVG
4
  Plugin URI: http://evan-herman.com/wp-svg-icon-set-1-example/
5
  Description: Easily insert svg icons directly in to your WordPress blog with this plugin.
6
+ Version: 1.3
7
  Author: Evan Herman
8
  Author URI: http://www.Evan-Herman.com
9
  License:
73
  margin: 0;
74
  padding: 0;
75
  }
76
+ .glyph, .expansion-Glyph {
77
  font-size: 16px;
78
  float: left;
79
  text-align: center;
84
  border-radius: .25em;
85
  box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
86
  }
87
+ .glyph input, .expansion-Glyph input {
88
  font-family: consolas, monospace;
89
  font-size: 13px;
90
  width: 100%;
93
  box-shadow: 0 0 0 1px #ccc;
94
  padding: .125em;
95
  }
96
+ .expansion-Glyph:hover { background-color: #CCCCCC !important; cursor:pointer !important; }
97
  .w-main {
98
  width: 95%;
99
  }
2201
  <a class="glyph-link" href="#"><input class="glyph_unicode" type="text" readonly="readonly" value="&amp;#xe1f3;" > </a>
2202
  </div>
2203
  </section>
2204
+ <span style="display:inline-block"><img style="width:15%; margin-right:.5em; float:left;" src="<?php echo plugins_url( '/svg-vector-icon-plugin/includes/images/New-Logo.png' ); ?>" /><h3 style="float:left;"> Expansion Pack </h3></span>
2205
+ <p>Welcome to the new expansion pack section! This section will grow as time progresses. But in the meantime, here's a rounded linked in icon for you!</p>
2206
+
2207
+ <p>Unfortunately since the release of this plugin, the original source of these web font icons began releasing these without proper unicode support.So as of right now,
2208
+ the icons in the expansion pack must be inlcuded by adding a class to an element. Clicking the icon will still provide you with the necessary code
2209
+ to display the icon, it just will no longer be in Unicode form. I'm terribly sorry for the inconvinence.</p>
2210
+
2211
+ <p style="color:#FF8000;">If you need an icon (or icons) included for a project immediately, please make a donation and I will include them as soon as possible.</p>
2212
+
2213
+ <p style="color:#E27F7F;">If you have designed icons you would like to include in this plugin, I would be delighted to include them and give you attribution. Just get in contact with me <a href="http://www.evan-herman.com/contact/" target="_blank">here</a>.</p>
2214
+
2215
+ <div class="expansion-Glyph">
2216
+ <span class="fs1 wp-svg-icon-set1-expansion-linkedin_circle"></span>
2217
+ <a class="glyph-link" href="#"><input class="expansion_glyph_unicode" type="text" readonly="readonly" value="wp-svg-icon-set1-expansion-linkedin_circle" > </a>
2218
+ </div>
2219
  </div>
2220
  <div class="clear"></div>
 
2221
  <footer>
2222
  <p>Plugin Created By <a style="color:#B35047;" href="http://www.Evan-Herman.com" target="_blank">Evan Herman</a></p>
2223
  </footer>