Pictos font library from CodePen

Developer
John Stammerman
Size
3,790 Kb
Views
58,696
  1. Pictos font library from CodePen Previews
  2. Pictos font library from CodePen HTML Codes
  3. Pictos font library from CodePen CSS Codes

How do I make an pictos font library from codepen?

I've borrowed this from the gentlemen at CodePen for some of my pens. Wanted to create a reference so I don't have to type them out every time.. What is a pictos font library from codepen? How do you make a pictos font library from codepen? This script and codes were developed by John Stammerman on 23 July 2022, Saturday.

Pictos font library from CodePen Previews
IQ Test

Pictos font library from CodePen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pictos font library from CodePen</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div> <h1>Pictos Fonts</h1> <span>1: <i class="icon">1</i></span> <span>2: <i class="icon">2</i></span> <span>3: <i class="icon">3</i></span> <span>4: <i class="icon">4</i></span> <span>5: <i class="icon">5</i></span> <span>6: <i class="icon">6</i></span> <span>7: <i class="icon">7</i></span> <span>8: <i class="icon">8</i></span> <span>9: <i class="icon">9</i></span> <span>!: <i class="icon">!</i></span> <span>(: <i class="icon">(</i></span> <span>q: <i class="icon">q</i></span> <span>e: <i class="icon">e</i></span> <span>r: <i class="icon">r</i></span> <span>t: <i class="icon">t</i></span> <span>u: <i class="icon">u</i></span> <span>i: <i class="icon">i</i></span> <span>p: <i class="icon">p</i></span> <span>E: <i class="icon">E</i></span> <span>R: <i class="icon">R</i></span> <span>P: <i class="icon">P</i></span> <span>a: <i class="icon">a</i></span> <span>s: <i class="icon">s</i></span> <span>d: <i class="icon">d</i></span> <span>f: <i class="icon">f</i></span> <span>g: <i class="icon">g</i></span> <span>h: <i class="icon">h</i></span> <span>j: <i class="icon">j</i></span> <span>k: <i class="icon">k</i></span> <span>l: <i class="icon">l</i></span> <span>': <i class="icon">'</i></span> <span>A: <i class="icon">A</i></span> <span>S: <i class="icon">S</i></span> <span>D: <i class="icon">D</i></span> <span>F: <i class="icon">F</i></span> <span>G: <i class="icon">G</i></span> <span>J: <i class="icon">J</i></span> <span>": <i class="icon">"</i></span> <span>x: <i class="icon">x</i></span> <span>c: <i class="icon">c</i></span> <span>n: <i class="icon">n</i></span> <span>m: <i class="icon">m</i></span> <span>Z: <i class="icon">Z</i></span> <span>X: <i class="icon">X</i></span> <span>C: <i class="icon">C</i></span> <span>B: <i class="icon">B</i></span> <span>M: <i class="icon">M</i></span> <span>?: <i class="icon">?</i></span> <p>Font library from CodePen.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Pictos font library from CodePen - Script Codes CSS Codes

@font-face { font-family: 'Pictos Custom'; src: url("/fonts/icomoon.eot"); src: url("/fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("/fonts/icomoon.woff") format("woff"), url("/fonts/icomoon.ttf") format("truetype"), url("/fonts/icomoon.svg#PictosRegular") format("svg");
}
body { background: #ddd;
}
div { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI5NiUiIHN0b3AtY29sb3I9IiNlZWVlZWUiLz48c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(96%, #eeeeee), color-stop(96%, #cccccc), color-stop(100%, #eeeeee)); background-image: -moz-linear-gradient(#eeeeee 1.2em, #cccccc 1.2em, #eeeeee 1.25em); background-image: -webkit-linear-gradient(#eeeeee 1.2em, #cccccc 1.2em, #eeeeee 1.25em); background-image: linear-gradient(#eeeeee 1.2em, #cccccc 1.2em, #eeeeee 1.25em); background-size: 100% 1.8em; background-position: 0 0; background-origin: content-box; background-attachment: local; -moz-border-radius: 1.2em; -webkit-border-radius: 1.2em; border-radius: 1.2em; -moz-box-shadow: 0 0 4em #bbb; -webkit-box-shadow: 0 0 4em #bbb; box-shadow: 0 0 4em #bbb; color: #bbb; font-family: 'courier new', courier, georgia, serif; font-size: 1.6em; line-height: 1.5em; margin: 2em auto; padding: 1em; width: 32em;
}
div span { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: solid 2px rgba(153, 153, 153, 0); display: block; float: left; padding: 0 0.5em; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 100ms; -o-transition-duration: 100ms; -webkit-transition-duration: 100ms; transition-duration: 100ms; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; width: 100px;
}
div span:hover { background: rgba(77, 77, 77, 0.7); border: solid 2px #eee; -moz-box-shadow: 0 0 20px #999999; -webkit-box-shadow: 0 0 20px #999999; box-shadow: 0 0 20px #999999; color: #ccc; -moz-transform: scale(1.45, 1.45); -ms-transform: scale(1.45, 1.45); -webkit-transform: scale(1.45, 1.45); transform: scale(1.45, 1.45); -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 200ms; -o-transition-duration: 200ms; -webkit-transition-duration: 200ms; transition-duration: 200ms; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;
}
div span:hover i { color: #fff;
}
h1 { font-weight: bold; color: #66f;
}
p { clear: left; color: #66f;
}
i.icon { color: #777; font-family: 'Pictos Custom'; font-style: normal;
}
Pictos font library from CodePen - Script Codes
Pictos font library from CodePen - Script Codes
Home Page Home
Developer John Stammerman
Username jstam
Uploaded July 23, 2022
Rating 3
Size 3,790 Kb
Views 58,696
Do you need developer help for Pictos font library from CodePen?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John Stammerman (jstam) Script Codes
Name
Hidden Sidebar Menu
Toying with Flexbox
CSS3 dry-erase clipboard
Vertical Rhythm Typography example
A Pen by John Stammerman
J5T4M Jumbotron
Select field variations across browsers
Checkbox select all example
Foundation 6 example marku
UI Pattern Library
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!