automotive-icons
Version:
Icon fonts for an automotive app
229 lines (221 loc) • 7.01 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Automotive Icons</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 10px 20px;
text-align: center;
}
.wrapper {
width: 800px;
margin: auto;
}
.preview {
width: 100px;
display: inline-block;
margin: 10px;
}
.preview .inner {
display: inline-block;
width: 100%;
text-align: center;
background: #f5f5f5;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.preview .inner {
line-height: 85px;
font-size: 40px;
color: #333;
}
.label {
display: inline-block;
width: 100%;
box-sizing: border-box;
padding: 5px;
font-size: 10px;
font-family: Monaco, monospace;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #ddd;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
color: #666;
}
</style>
<link rel="stylesheet" type="text/css" href="./automotive.css" />
</head>
<body>
<div class="wrapper" >
<div class="preview">
<span class="inner">
<i class="automotive automotive-automatic"></i>
</span>
<br>
<span class='label'>automatic</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-bike"></i>
</span>
<br>
<span class='label'>bike</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-calendar"></i>
</span>
<br>
<span class='label'>calendar</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-car"></i>
</span>
<br>
<span class='label'>car</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-clock"></i>
</span>
<br>
<span class='label'>clock</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-donutchart"></i>
</span>
<br>
<span class='label'>donutchart</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-door"></i>
</span>
<br>
<span class='label'>door</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-electric"></i>
</span>
<br>
<span class='label'>electric</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-grid"></i>
</span>
<br>
<span class='label'>grid</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-home"></i>
</span>
<br>
<span class='label'>home</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-linechart"></i>
</span>
<br>
<span class='label'>linechart</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-list-alternative"></i>
</span>
<br>
<span class='label'>list-alternative</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-list"></i>
</span>
<br>
<span class='label'>list</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-manual"></i>
</span>
<br>
<span class='label'>manual</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-nozzle"></i>
</span>
<br>
<span class='label'>nozzle</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-odometer"></i>
</span>
<br>
<span class='label'>odometer</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-people"></i>
</span>
<br>
<span class='label'>people</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-person"></i>
</span>
<br>
<span class='label'>person</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-piechart"></i>
</span>
<br>
<span class='label'>piechart</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-plug"></i>
</span>
<br>
<span class='label'>plug</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-search"></i>
</span>
<br>
<span class='label'>search</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-setting"></i>
</span>
<br>
<span class='label'>setting</span>
</div>
<div class="preview">
<span class="inner">
<i class="automotive automotive-van"></i>
</span>
<br>
<span class='label'>van</span>
</div>
</div>
</body>
</html>