Skip to content

Instantly share code, notes, and snippets.

@jalbertbowden

jalbertbowden/css-icons.haml

Last active June 2, 2019 08:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jalbertbowden/5888308 to your computer and use it in GitHub Desktop.
Save jalbertbowden/5888308 to your computer and use it in GitHub Desktop.
Download ZIP
css icons - A CodePen by Andreas Storm. free css icon set - feel free to use this little icon set for your work
Raw
css-icons.haml
.icons
%div
.play
%div
.stop
%div
.pause
%div
.back
%div
.next
%div
.cloud
%div
.search
%div
.comment
%div
.yes
%div
.no
%div
.wheels
%div
.heart
%div
.share
%div
.marker
%div
.video
%div
.arrowup
%div
.arrowdown
%div
.arrowright
%div
.arrowleft
%div
.stripes
Raw
script.js
// Icon Set by Andreas Storm
// http://dribbble.com/shots/1133469-free-icon-set
Raw
style.sass
@import "compass"
body
background: #2a2a34
.icons
top: 50%
left: 50%
position: absolute
margin: -100px 0 0 -125px
width: 250px
> div
display: inline-block
float: left
width: 50px
height: 50px
.play, .stop, .pause, .back, .next, .arrowdown, .arrowup, .arrowleft, .arrowright, .stripes
width: 24px
height: 24px
border-radius: 50%
margin: 0 auto
margin-top: 11px
border: 2px solid #6179A6
.play:before
display: block
content: ""
border-top: 6px solid transparent
border-bottom: 6px solid transparent
border-left: 10px solid #6179A6
margin: 6px 0 0 8px
.stop:before
background: #6179A6
content: ""
display: block
margin: 7px
width: 10px
height: 10px
.pause
&:before
display: block
background: #6179A6
content: ""
margin: 7px 2px 0px 7px
width: 4px
height: 10px
&:after
display: block
background: #6179A6
content: ""
margin: -10px 2px 0px 13px
width: 4px
height: 10px
.back
&:before
display: block
content: ""
border-top: 6px solid transparent
border-bottom: 6px solid transparent
border-right: 7px solid #6179A6
margin: 6px 7px 0 0
&:after
display: block
content: ""
border-top: 6px solid transparent
border-bottom: 6px solid transparent
border-right: 7px solid #6179A6
margin: -12px 13px 0 0
.next
&:before
display: block
content: ""
border-top: 6px solid transparent
border-bottom: 6px solid transparent
border-left: 7px solid #6179A6
margin: 6px 0 0 7px
&:after
display: block
content: ""
border-top: 6px solid transparent
border-bottom: 6px solid transparent
border-left: 7px solid #6179A6
margin: -12px 0 0 13px
.cloud
background: #6179A6
height: 10px
border-radius: 5px
width: 24px
float: left
margin: 24px 0 0 12px
&:before
display: block
content: ""
background: #6179A6
height: 8px
border-radius: 50%
width: 8px
margin: -4px 0 0 3px
&:after
display: block
content: ""
background: #6179A6
height: 12px
border-radius: 50%
width: 12px
margin: -11px 0 0 9px
.search
border: 3px solid #6179A6
height: 8px
border-radius: 50%
width: 8px
float: left
margin: 17px 0px 0px 18px
&:after
display: block
content: ""
background: #6179A6
transform: rotate(45deg)
height: 4px
border-radius: 2px
width: 6px
margin: 8px 0px 0px 7px
.comment
width: 20px
height: 14px
background: #6179A6
border-radius: 3px
float: left
margin: 17px 0px 0px 15px
&:before
display: block
content: ""
margin: 5px 0px 0px 8px
width: 6px
height: 6px
border-bottom: 6px solid transparent
border-left: 6px solid #6179A6
.yes
float: left
margin: 22px 0px 0px 18px
transform: rotate(135deg)
width: 20px
border-radius: 4px
height: 4px
background: #6179A6
&:after
display: block
content: ""
transform: rotate(90deg)
width: 10px
border-radius: 4px
height: 4px
background: #6179A6
margin: 3px 0 0 13px
.no
float: left
margin: 22px 0px 0px 15px
transform: rotate(45deg)
width: 20px
border-radius: 4px
height: 4px
background: #6179A6
&:after
display: block
content: ""
transform: rotate(90deg)
width: 20px
border-radius: 4px
height: 4px
background: #6179A6
.heart
transform: rotate(45deg)
width: 15px
height: 10px
background: #6179A6
border-radius: 10px 0px 0px 10px
margin: 20px 0 0 16px
&:after
display: block
position: absolute
content: ""
width: 10px
height: 10px
background: #6179A6
border-radius: 50%
margin: -5px 0 0 5px
.wheels
width: 16px
height: 16px
border: 1px dashed #6179A6
border-radius: 50%
box-shadow: inset 0 0 0 3px #6179A6
margin: 16px 0 0 15px
.share
width: 8px
height: 8px
border: solid 2px #6179A6
border-right: solid 1px transparent
border-top: solid 1px transparent
transform: rotate(45deg)
margin: 20px 0 0 21px
&:before
position: absolute
content: ""
width: 6px
height: 6px
margin: 6px 0 0 -4px
background: #6179A6
border-radius: 50%
box-shadow: 10px 0px 0 #6179a6, 0px -10px 0 #6179a6
.marker
width: 16px
height: 16px
border-radius: 50% 50% 50% 0
background: #6179A6
transform: rotate(-45deg)
left: 50%
top: 50%
margin: 16px 0 0 16px
&:after
content: ''
display: block
width: 8px
height: 8px
position: absolute
margin: 4px 0 0 4px
background: #2a2a34
border-radius: 50%
.video
width: 16px
height: 14px
background: #6179A6
border-radius: 3px
float: left
margin: 17px 0px 0px 14px
background: #6179A6
&:after
display: block
content: ""
border-right: 10px solid #6179A6
border-left: 10px solid transparent
border-top: 6px solid transparent
border-bottom: 6px solid transparent
margin: 1px 0px 0px 2px
.arrowup
&:after
position: absolute
display: block
width: 4px
height: 7px
content: ""
background: #6179A6
margin: 11px 0px 0px 10px
&:before
position: absolute
display: block
width: 0px
border-left: 6px solid transparent
border-right: 6px solid transparent
border-bottom: 6px solid #6179A6
content: ""
margin: 6px 0px 0px 6px
.arrowdown
&:after
position: absolute
display: block
width: 4px
height: 7px
content: ""
background: #6179A6
margin: 7px 0px 0px 10px
&:before
position: absolute
display: block
width: 0px
border-left: 6px solid transparent
border-right: 6px solid transparent
border-top: 6px solid #6179A6
content: ""
margin: 13px 0px 0px 6px
.stripes:after
content: ""
display: block
width: 12px
height: 2px
background: #6179A6
margin: 11px 0px 0px 6px
box-shadow: 0px 1px 0px #2a2a34, 0px 4px 0px #6179a6, 0px -1px 0px #2a2a34, 0px -4px 0px #6179a6
.arrowleft
&:after
content: ""
display: block
width: 7px
height: 4px
background: #6179A6
margin: 10px 0px 0px 6px
&:before
position: absolute
display: block
width: 0px
border-top: 6px solid transparent
border-bottom: 6px solid transparent
border-left: 7px solid #6179A6
content: ""
margin: 6px 0px 0px 12px
.arrowright
&:after
content: ""
display: block
width: 7px
height: 4px
background: #6179A6
margin: 10px 0px 0px 11px
&:before
position: absolute
display: block
width: 0px
border-top: 6px solid transparent
border-bottom: 6px solid transparent
border-right: 7px solid #6179A6
content: ""
margin: 6px 0px 0px 5px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment