Skip to content

Instantly share code, notes, and snippets.

@jsanchezpando

jsanchezpando/font-icons.html

Created April 10, 2012 15:06
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jsanchezpando/2352022 to your computer and use it in GitHub Desktop.
Save jsanchezpando/2352022 to your computer and use it in GitHub Desktop.
Download ZIP
font icons with text gradient.
Raw
font-icons.html
<html>
<head>
<meta charset="utf-8" />
<style>
body {
font-family: sans-serif;
}
.icon {
position:relative;
display: inline-block;
height: 1.2em;
width: 1.2em;
line-height: 1.2em;
font-size: 3em;
font-weight: bold;
text-decoration: none;
text-align: center;
border-radius:1em;
color: red;
-webkit-mask-image: -webkit-radial-gradient(40% 40%, circle cover, rgba(0,0,0,.5), rgba(0,0,0,1));
text-shadow: 3px 2px 4px rgba(0,0,0,.6);
}
.icon::before {
content:' ';
position:absolute;
display: inline-block;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius:100%;
background-color: #A0E4FF;
background-image: -webkit-radial-gradient(70% 70%, ellipse contain, #FFFFFF, #A0E4FF);
border: 3px solid rgba(0,0,0,.6);
box-shadow: inset 3px 2px 8px rgba(0,0,0,.6);
z-index: -1;
}
</style>
</head>
<body>
<nav>
<a class="icon" href="#">A</a>
<a class="icon" href="#">B</a>
<a class="icon" href="#">+</a>
<a class="icon" href="#">♪</a>
<a class="icon" href="#">■</a>
<a class="icon" href="#">►</a>
<a class="icon" href="#">✖</a>
<a class="icon" href="#">✔</a>
</nav>
<p>Pure CSS, no bitmap, no extra http request.</p>
<p>This example support Webkit only.</p>
<p>Sized by font-size property.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment