Change/Replace text with icon using css
<html >
<head>
<meta charset="UTF-8">
<title>Replace text with an icon font icon</title>
<link rel="stylesheet" href="css/normalize.css">
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
@import url(http://weloveiconfonts.com/api/?family=entypo);
html,
body {
background: #1e8cbe;
}
p {
max-width: 600px;
margin: 50px auto;
color: #fff;
font: 21px/1.4em Helvetica, Arial, sans-serif;
}
.the-trick {
display: inline-block;
position: relative;
padding: 4px 16px;
right: 9999px;
}
.the-trick:after {
content: "\e7a3";
position: absolute;
top: 2px;
right: -9999px;
width: 100%;
text-align: center;
height: 100%;
color: #fff;
font-size: 50px;
line-height: 30.8px;
font-family: 'entypo', sans-serif;
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<p>Here's a <span class="the-trick">cool</span> trick for replacing text with an icon font icon inline. Copying and pasting still works normally. It might be useful if you want to use a wordmark as an icon among other things. (Highlight the first sentece and copy/paste.)</p>
</body>
</html>
Comments
Post a Comment