Skip to content

Instantly share code, notes, and snippets.

@kaezarrex kaezarrex/index.html
Last active Dec 11, 2015

Embed
What would you like to do?
Drawing with Font Awesome
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width">
<title>Font Awesome Drawing</title>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div class="picture">
<span class="interest"><i class="icon-cloud"></i></span>
<span class="interest"><i class="icon-reorder"></i></span>
<span class="interest"><i class="icon-beer"></i></span>
</div>
<div class="picture">
<span class="interest"><i class="icon-signal"></i></span>
<span class="interest"><i class="icon-github"></i></span>
<span class="interest"><i class="icon-coffee"></i></span>
</div>
<div class="picture">
<span class="interest"><i class="icon-bolt"></i></span>
<span class="interest"><i class="icon-circle"></i></span>
<span class="interest"><i class="icon-user"></i></span>
</div>
</body>
</html>
body {
background-color: #fff;
}
.picture {
font-size: 200px;
margin: 40px 20px 0;
display: inline-block;
position: relative;
}
.icon-cloud {
font-size: 90px;
color: #ddd;
position: absolute;
left: 73px;
top: -23px;
z-index: -1;
}
.icon-reorder {
font-size: 100px;
color: #F8DA3D;
position: absolute;
left: 80px;
top: 45px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
z-index: 1;
}
.icon-beer {
color: #F8CF3D;
top: 8px;
left: 0px;
}
.icon-coffee {
color: #4D8BC7;
}
.icon-signal {
font-size: 90px;
color: #ddd;
position: absolute;
left: 50px;
top: -45px;
z-index: -1;
}
.icon-github {
font-size: 100px;
color: #40668C;
position: absolute;
left: 50px;
top: 50px;
z-index: 1;
}
.icon-user {
color: #DA251C;
}
.icon-bolt {
font-size: 90px;
color: #FFF705;
position: absolute;
left: 50px;
top: 115px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
z-index: 3;
}
.icon-circle {
font-size: 65px;
color: #fff;
position: absolute;
left: 50px;
top: 125px;
z-index: 2;
}
@eyegenca

This comment has been minimized.

Copy link

commented Jun 7, 2014

Cool! :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.