| 1 |
<!DOCTYPE html> |
| 2 |
<html lang="en"> |
| 3 |
<head> |
| 4 |
<meta charset="utf-8"> |
| 5 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 6 |
<meta name="viewport" content="width=device-width,initial-scale=1"> |
| 7 |
<title>Font Reference - wptabledatapress_fontawesome</title> |
| 8 |
<link href="http://fonts.googleapis.com/css?family=Dosis:400,500,700" rel="stylesheet" type="text/css"> |
| 9 |
<link rel="stylesheet" href="styles.css"> |
| 10 |
<style type="text/css">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}body{line-height:1;color:#000;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0;vertical-align:middle}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}a img{border:none}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{font-family:'Dosis','Tahoma',sans-serif}.container{margin:15px auto;width:80%}h1{margin:40px 0 20px;font-weight:700;font-size:38px;line-height:32px;color:#fb565e}h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercase;font-weight:500}.small{font-size:14px;color:#a5adb4;}.small a{color:#a5adb4;}.small a:hover{color:#fb565e}.glyphs.character-mapping{margin:0 0 20px 0;padding:20px 0 20px 30px;color:rgba(0,0,0,0.5);border:1px solid #d8e0e5;-webkit-border-radius:3px;border-radius:3px;}.glyphs.character-mapping li{margin:0 30px 20px 0;display:inline-block;width:90px}.glyphs.character-mapping .icon{margin:10px 0 10px 15px;padding:15px;position:relative;width:55px;height:55px;color:#162a36 !important;overflow:hidden;-webkit-border-radius:3px;border-radius:3px;font-size:32px;}.glyphs.character-mapping .icon svg{fill:#000}.glyphs.character-mapping input{margin:0;padding:5px 0;line-height:12px;font-size:12px;display:block;width:100%;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;text-align:center;outline:0;}.glyphs.character-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}.glyphs.character-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}.glyphs.css-mapping{margin:0 0 60px 0;padding:30px 0 20px 30px;color:rgba(0,0,0,0.5);border:1px solid #d8e0e5;-webkit-border-radius:3px;border-radius:3px;}.glyphs.css-mapping li{margin:0 30px 20px 0;padding:0;display:inline-block;overflow:hidden}.glyphs.css-mapping .icon{margin:0;margin-right:10px;padding:13px;height:50px;width:50px;color:#162a36 !important;overflow:hidden;float:left;font-size:24px}.glyphs.css-mapping input{margin:0;margin-top:5px;padding:8px;line-height:16px;font-size:16px;display:block;width:150px;height:40px;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;background:#fff;outline:0;float:right;}.glyphs.css-mapping input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}.glyphs.css-mapping input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}</style> |
| 11 |
</head> |
| 12 |
<body> |
| 13 |
<div class="container"> |
| 14 |
<h1>wptabledatapress_fontawesome</h1> |
| 15 |
<p class="small">This font was created with<a href="http://fontastic.me/">Fontastic</a></p> |
| 16 |
<h2>CSS mapping</h2> |
| 17 |
<ul class="glyphs css-mapping"> |
| 18 |
<li> |
| 19 |
<div class="icon fooicon-search"></div> |
| 20 |
<input type="text" readonly="readonly" value="search"> |
| 21 |
</li> |
| 22 |
<li> |
| 23 |
<div class="icon fooicon-sort-desc"></div> |
| 24 |
<input type="text" readonly="readonly" value="sort-desc"> |
| 25 |
</li> |
| 26 |
<li> |
| 27 |
<div class="icon fooicon-sort-asc"></div> |
| 28 |
<input type="text" readonly="readonly" value="sort-asc"> |
| 29 |
</li> |
| 30 |
<li> |
| 31 |
<div class="icon fooicon-sort"></div> |
| 32 |
<input type="text" readonly="readonly" value="sort"> |
| 33 |
</li> |
| 34 |
<li> |
| 35 |
<div class="icon fooicon-minus"></div> |
| 36 |
<input type="text" readonly="readonly" value="minus"> |
| 37 |
</li> |
| 38 |
<li> |
| 39 |
<div class="icon fooicon-plus"></div> |
| 40 |
<input type="text" readonly="readonly" value="plus"> |
| 41 |
</li> |
| 42 |
<li> |
| 43 |
<div class="icon fooicon-circle-o-notch"></div> |
| 44 |
<input type="text" readonly="readonly" value="circle-o-notch"> |
| 45 |
</li> |
| 46 |
</ul> |
| 47 |
<h2>Character mapping</h2> |
| 48 |
<ul class="glyphs character-mapping"> |
| 49 |
<li> |
| 50 |
<div data-icon="" class="icon"></div> |
| 51 |
<input type="text" readonly="readonly" value="&#xf002;"> |
| 52 |
</li> |
| 53 |
<li> |
| 54 |
<div data-icon="" class="icon"></div> |
| 55 |
<input type="text" readonly="readonly" value="&#xf161;"> |
| 56 |
</li> |
| 57 |
<li> |
| 58 |
<div data-icon="" class="icon"></div> |
| 59 |
<input type="text" readonly="readonly" value="&#xf160;"> |
| 60 |
</li> |
| 61 |
<li> |
| 62 |
<div data-icon="" class="icon"></div> |
| 63 |
<input type="text" readonly="readonly" value="&#xf0dc;"> |
| 64 |
</li> |
| 65 |
<li> |
| 66 |
<div data-icon="" class="icon"></div> |
| 67 |
<input type="text" readonly="readonly" value="&#xf068;"> |
| 68 |
</li> |
| 69 |
<li> |
| 70 |
<div data-icon="" class="icon"></div> |
| 71 |
<input type="text" readonly="readonly" value="&#xf067;"> |
| 72 |
</li> |
| 73 |
<li> |
| 74 |
<div data-icon="" class="icon"></div> |
| 75 |
<input type="text" readonly="readonly" value="&#xe000;"> |
| 76 |
</li> |
| 77 |
</ul> |
| 78 |
</div> |
| 79 |
<script>(function() { |
| 80 |
var glyphs, i, len, ref; |
| 81 |
|
| 82 |
ref = document.getElementsByClassName('glyphs'); |
| 83 |
for (i = 0, len = ref.length; i < len; i++) { |
| 84 |
glyphs = ref[i]; |
| 85 |
glyphs.addEventListener('click', function(event) { |
| 86 |
if (event.target.tagName === 'INPUT') { |
| 87 |
return event.target.select(); |
| 88 |
} |
| 89 |
}); |
| 90 |
} |
| 91 |
|
| 92 |
}).call(this); |
| 93 |
|
| 94 |
</script> |
| 95 |
</body> |
| 96 |
</html> |
