WP SVG Icons - Version 1.1

Version Description

  • Made it easier to select icons by making the entire div selectable
  • Added icon highlighting after selection
  • Added smooth scroll back to top
  • Placed scripts in external file
Download this release

Release Info

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

Code changes from version 1.3.1 to 1.1

Files changed (17) 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 +0 -11
  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 +0 -40
  6. includes/css/wordpress-svg-icon-plugin-style.css +0 -1
  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 +1 -18
  11. includes/scripts.php +11 -21
  12. readme.txt +153 -184
  13. screenshot-1.jpg +0 -0
  14. screenshot-2.jpg +0 -0
  15. screenshot-3.jpg +0 -0
  16. screenshot-4.jpg +0 -0
  17. wordpress-svg-icons-plugin.php +5 -20
includes/css/icon-font/wp-svg-plugin-icon-set1-expansion.eot DELETED
Binary file
includes/css/icon-font/wp-svg-plugin-icon-set1-expansion.svg DELETED
@@ -1,11 +0,0 @@
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="M1018.201 444.444c-0.168-280.013-225.14-504.273-505.89-504.309-281.852-0.028-506.716 225.886-506.379 508.732 0.346 282.661 224.724 503.91 510.668 503.545 279.606-0.364 501.779-225.362 501.601-507.968zM445.411 375.922c1.216-0.007 2.425-0.007 3.641-0.007 0-39.929 2.318-80.034-0.586-119.749-3.613-49.324 25.906-49.679 61.838-50.762 39.058-1.191 57.85 10.55 55.391 52.718-2.566 44.218-0.915 88.701-0.374 133.061 0.558 45.853 22.495 76.046 55.425 77.816 33.943 1.829 58.578-29.726 59.555-78.623 0.951-47.307 1.608-94.68 0.134-141.952-1.323-42.371 25.603-43.117 55.798-42.379 29.619 0.719 61.775-5 60.718 41.874-1.323 59.121 1.056 118.346-0.746 177.44-3.525 115.169-101.465 169.813-202.431 114.155-8.206-4.531-17.202-18.33-26.359-6.189-26.438 35.017-62.698 15.834-94.546 18.819-22.905 2.149-28.801-12.397-27.983-34.466 1.732-47.193 0.524-94.501 0.524-141.746zM263.666 381.4c0.064 0 0.114 0 0.178 0 0-45.825 0.214-91.66-0.078-137.492-0.168-25.729 11.732-38.286 37.735-37.592 16.252 0.435 32.53 0.39 48.783 0.053 26.51-0.558 36.953 13.374 36.892 38.534-0.231 90.184-0.231 180.38-0.035 270.565 0.053 25.729-11.812 38.279-37.789 37.557-14.778-0.399-29.6-0.622-44.341 0.178-30.915 1.67-42.113-13.935-41.535-43.162 0.817-42.868 0.195-85.762 0.195-128.64zM326.798 599.477c32.743 0.959 60.975 30.523 60.888 63.749-0.099 34.974-26.359 58.621-64.030 57.629-37.789-0.985-61.633-25.24-60.301-61.305 1.287-34.715 29.147-61.082 63.447-60.072z" />
11
- </font></defs></svg>
 
 
 
 
 
 
 
 
 
 
 
includes/css/icon-font/wp-svg-plugin-icon-set1-expansion.ttf DELETED
Binary file
includes/css/icon-font/wp-svg-plugin-icon-set1-expansion.woff DELETED
Binary file
includes/css/wordpress-svg-icon-plugin-expansion-style.css DELETED
@@ -1,40 +0,0 @@
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,7 +9,6 @@
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';
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';
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 DELETED
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,37 +5,20 @@
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
  });
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('<div data-icon="'+ glyphUnicode + '"></div>');
 
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
  });
includes/scripts.php CHANGED
@@ -1,21 +1,11 @@
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' );
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() {
 
 
 
 
 
 
 
 
 
 
readme.txt CHANGED
@@ -1,185 +1,154 @@
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.7
7
- Stable tag: 1.3.1
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/contact/">www.Evan-Herman.com</a>.
130
-
131
- = Do you want me to include your icons in to this plugin? =
132
-
133
- If you have a set of icons you want me to include in this plugin, or you need an icon added for a client project, please contact me via
134
- the <a href="http://www.evan-herman.com/contact/">contact form</a> on my website. You can pay for the request to include icons, and upload the files right to my site. Once payment is received
135
- I will get the icons included in the plugin within 24 hours (usually faster).
136
- <a href="http://www.Evan-Herman.com/contact/">www.Evan-Herman.com</a>
137
-
138
-
139
- == Screenshots ==
140
- 1. Main plugin screen. Pacman icon selected, generated code visible.
141
- 2. Some more icons included in this plugin.
142
- 3. All included icons in the icon selection screen in the dashboard.
143
- 4. The new expansion section, with the new linked in rounded icon
144
-
145
- == Changelog ==
146
- = 1.3.1 =
147
- * Fixed inconsistency with new rounded Linked in icon - October 23rd, 2013
148
-
149
- = 1.3 =
150
- * Added a new expansion section
151
- * Added 1 new rounded Linked in icon - October 19th, 2013
152
-
153
- = 1.2 =
154
- * Replaced icon container holder from a `<div>` to a `<span>` - fixes line breaks when inserting icons into content - September 20th, 2013
155
-
156
- = 1.1 =
157
- * Made it easier to select icons by making the entire div selectable
158
- * Added icon highlighting after selection
159
- * Added smooth scroll back to top
160
- * Placed scripts in external file - August 2nd, 2013
161
-
162
- = 1.0 =
163
- * Original Release - July 20th, 2013
164
-
165
- == Upgrade Notice ==
166
- = 1.3.1 =
167
- * Fixed inconsistency with new rounded Linked in icon - October 23rd, 2013
168
-
169
- = 1.3 =
170
- * Added a new expansion section
171
- * Added 1 new rounded linked in icon - October 19th, 2013
172
-
173
- = 1.2 =
174
- * Replaced icon container holder from a <div> to a <span> - fixes line breaks when inserting icons into content - September 20th, 2013
175
-
176
- = 1.1 =
177
- * Made it easier to select icons by making the entire div selectable
178
- * Added icon highlighting after selection
179
- * Added smooth scroll back to top - August 2nd, 2013
180
-
181
- = 1.0 =
182
- * Original release - July 20th, 2013
183
-
184
- == Demo Page ==
185
  <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.1
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 in line 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.1 =
145
+ August 2nd, 2013
146
+ * Made it easier to select icons by making the entire div selectable
147
+ * Added icon highlighting after selection
148
+ * Added smooth scroll back to top
149
+
150
+ = 1.0 =
151
+ Original release - July 20th, 2013.
152
+
153
+ == Demo Page ==
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
154
  <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>
screenshot-1.jpg ADDED
Binary file
screenshot-2.jpg ADDED
Binary file
screenshot-3.jpg ADDED
Binary file
screenshot-4.jpg ADDED
Binary file
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.3.1
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, .expansion-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, .expansion-Glyph input {
88
  font-family: consolas, monospace;
89
  font-size: 13px;
90
  width: 100%;
@@ -93,7 +93,6 @@ function wordpress_svg_icons_cheat_sheet(){
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
  }
@@ -173,7 +172,7 @@ function wordpress_svg_icons_cheat_sheet(){
173
  </div> <!-- end how to use -->
174
  <div class="tips-box">
175
  <h3 style="padding-left:10px;">Tips:</h3>
176
- <div class="wp-svg-paypal-donation-button" style="position:inherit; display:inline; float:left; margin-left:200px;">
177
  <b style="text-decoration:underline; float:left; margin-top:5px; font-size:13px;">Buy me a Monster Energy Drink</b>
178
  <form action="https://www.paypal.com/cgi-bin/webscr" style=" float:left;" method="post" target="_top">
179
  <input type="hidden" name="cmd" value="_donations">
@@ -2201,23 +2200,9 @@ function wordpress_svg_icons_cheat_sheet(){
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>
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.1
7
  Author: Evan Herman
8
  Author URI: http://www.Evan-Herman.com
9
  License:
73
  margin: 0;
74
  padding: 0;
75
  }
76
+ .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 {
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
  .w-main {
97
  width: 95%;
98
  }
172
  </div> <!-- end how to use -->
173
  <div class="tips-box">
174
  <h3 style="padding-left:10px;">Tips:</h3>
175
+ <div class="wp-svg-paypal-donation-button" style="position:inherit; width:500px; display:inline; float:left; margin-left:200px;">
176
  <b style="text-decoration:underline; float:left; margin-top:5px; font-size:13px;">Buy me a Monster Energy Drink</b>
177
  <form action="https://www.paypal.com/cgi-bin/webscr" style=" float:left;" method="post" target="_top">
178
  <input type="hidden" name="cmd" value="_donations">
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>