Skip to content

Instantly share code, notes, and snippets.

@tomhodgins

tomhodgins/background-icon.html

Last active December 14, 2015 07:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomhodgins/5053979 to your computer and use it in GitHub Desktop.
Save tomhodgins/5053979 to your computer and use it in GitHub Desktop.
Download ZIP
Using a FontAwesome icon as a background image for a Bootstrap .hero-unit
Raw
background-icon.html
<!DOCTYPE html>
<html>
<head>
<title>FontAwesome Background Icon</title>
<!-- Bootstrap: with responsive, no icons -->
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<!-- FontAwesome -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!-- Boostrap JavaScript -->
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<!-- Source Sans via Google Web Fonts -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- HTML Section -->
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="hero-unit span8 offset2 icon">
<h1>Hero Unit with a background icon</h1>
<br>
<p>Donec vel tellus dictum lectus rhoncus ullamcorper. Aliquam eleifend mi enim, et euismod lorem. Vestibulum in ipsum eros. Suspendisse aliquam, ante ut porttitor varius, nisi enim congue arcu, et malesuada sapien sapien vitae orci.</p>
</div>
<div class="page span6 offset3">
<p>Proin cursus lectus vitae magna lobortis laoreet. Ut placerat lorem eget metus luctus elementum. Etiam sem orci, rhoncus in tristique vel, semper nec tellus. Nunc placerat molestie elit ac commodo. Proin ac nisi ante. Suspendisse viverra, dolor eu venenatis posuere, nibh arcu aliquet quam, non euismod ipsum nulla vitae lectus. Cras ut ipsum ac mi bibendum rutrum. Pellentesque venenatis rutrum enim, at gravida velit molestie et. Etiam semper lorem vel lacus tincidunt eu viverra sem dictum. Morbi dictum enim vel tellus consequat eu dictum metus porttitor. Cras elementum varius sapien ut dapibus. Aenean lorem dui, adipiscing quis vulputate ut, convallis nec ligula. Maecenas nisl purus, fermentum a tincidunt in, tristique a diam.</p>
<p>Ut vel ante turpis. Duis rutrum nibh quis metus consectetur viverra. Vivamus semper ornare enim, in suscipit eros gravida in. Phasellus vel orci a risus iaculis blandit et sodales risus. Etiam laoreet ultrices lectus tempor facilisis. Suspendisse neque tellus, gravida eu sagittis id, dignissim sit amet leo. Nulla facilisi. Nulla et ipsum tellus, et porttitor quam. Sed et purus purus. Quisque blandit tempus eros, et egestas nunc auctor et. Cras imperdiet leo quis turpis ultrices vel tincidunt enim commodo. Mauris eu sagittis odio. Praesent dapibus mattis lorem in porttitor. Aliquam ligula lacus, vehicula ut accumsan ut, rutrum tristique tellus. Vivamus pulvinar neque sed ligula accumsan facilisis.</p>
<p>Nunc in libero ut lectus accumsan tristique in a nibh. Nullam sed leo eros. Sed nec tellus vel ipsum venenatis tempus quis quis diam. Suspendisse tristique dignissim posuere. Suspendisse tincidunt euismod mi non rhoncus. Mauris euismod ornare molestie. Sed porttitor, metus in tincidunt eleifend, nibh erat placerat diam, non congue odio massa in ligula. Integer gravida, risus sit amet auctor laoreet, dui tortor adipiscing risus, ac sodales odio elit vitae sapien. Proin pharetra euismod purus, at laoreet urna molestie eget. Pellentesque egestas ipsum vel risus eleifend molestie. Mauris ullamcorper mauris non est placerat fringilla. Nulla facilisi. Donec eu pellentesque purus.</p>
</div>
</div>
</div>
</div>
<!-- JavaScript Section -->
<script type="text/javascript">
$(document).ready(function(){
// custom JavaScript goes here
});
</script>
<!-- CSS Section -->
<style>
* {
font-family: 'Source Sans Pro', sans-serif;
}
.hero-unit {
margin-top: 50px;
font-weight: 400;
position:relative;
overflow:hidden;
z-index: 50;
}
.hero-unit.icon:before {
content: "\f0ac";
font-family:'FontAwesome';
position: absolute;
font-size:750px;
bottom: 10%;
right: -45%;
opacity: 0.1;
z-index: -1;
}
.page {
margin: 0 0 50px 0;
}
/* custom CSS goes here */
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment