re = /src=['"]([http]+s?\S*)['"?] ?|href=['"]([http]+s?\S*)['"?] ?/
str = '<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Font Awesome | Bootstrap Cheat Sheets</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="assets/img/favicon.ico" />
<link href=\'http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,900,400italic,600italic,700italic|Varela+Round&subset=latin,latin-ext\' rel=\'stylesheet\' type=\'text/css\'>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="assets/js/jquery.quicksearch.min.js"></script>
<!-- Modernizr for simple touch detection -->
<script src="assets/js/modernizr-touchevents.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!-- Hover menu plugin for Bootstrap -->
<script src="assets/js/bootstrap-hover-dropdown.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Cheat sheet CSS -->
<link rel="stylesheet" href="assets/css/fontawesome-cheatsheet.css">
<!-- Font Awesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style type="text/css">
#home{opacity: 0;}
#about{opacity: 0;}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container nav-contain">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="http://bootstrapcheatsheets.com"><img src="assets/img/logo-white-h58@2x.png" alt="Bootstrap Cheat Sheets logo" width="144" height="58" /></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-search">
<div class="input-group">
<input id="glyph-search" type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="filter-clear">X</button>
</span>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">Digital <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://glyphicons.bootstrapcheatsheets.com">Glyphicons</a></li>
<li><a href="#home" id="scroll-to-home">Font Awesome</a></li>
</ul>
</li>
<li><a href="#about" id="scroll-to-about">About</a></li>
<li><a href="http://bootstrapcheatsheets.com/shop">Shop</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="home" id="home">
<div class="container-wide">
<div class="alert alert-warning alert-dismissable alert-noflash hide">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Warning!</strong> Unfortunately, the copy buttons on these cheat sheets only work with Flash installed. <br /> Hopefully in the future I can find a way to make it work with HTML5 instead.
</div>
<h1 class="text-center title">Font Awesome</h1>
<ul class="font-awesome-icons">
<li class="col-md-1 col-sm-2 col-xs-6 grid-icon"> <i class="fa fa-adjust" data-unicode="f042"></i> <span class="fa-class"></span>
<div class="btn-container">
<div class="btn-group">
<button title="More options" type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown"> Copy <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" class="copy-button copy-html">HTML Tag</a></li>
<li><a href="#" class="copy-button copy-unicode-html">Unicode HTML Entity</a></li>
<li><a href="#" class="copy-button copy-unicode-hex">CSS Rule</a></li>
</ul>
</div>
</div>
</li>
<li class="col-md-1 col-sm-2 col-xs-6 grid-icon"> <i class="fa fa-youtube-square" data-unicode="f166"></i> <span class="fa-class"></span>
<div class="btn-container">
<div class="btn-group">
<button title="More options" type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown"> Copy <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" class="copy-button copy-html">HTML Tag</a></li>
<li><a href="#" class="copy-button copy-unicode-html">Unicode HTML Entity</a></li>
<li><a href="#" class="copy-button copy-unicode-hex">CSS Rule</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="about" id="about">
<div class="container">
<div class="col-md-8">
<h1>How to Use Font Awesome</h1>
<p>Font Awesome is... well, awesome! It\'s a great icon-based font that\'s very commonly paired-up with Bootstrap-based web projects. It has a library of 369 icons—larger than the <a href="http://bootstrapcheatsheets.com/glyphicons">200 native Bootstrap 3 glyphicons</a>—and can also unlock unique features like flipped, stacked or rotated icons (and much more).</p>
<p><strong>If you\'re finding the Glyphicons in Bootstrap 3 a little bit limited, Font Awesome is for you.</strong></p>
<h2>Cheat sheet?</h2>
<p>Yeah! To use this cheat sheet, simply find the icon you want to use and click the copy button. This will give you the complete HTML Tag, Unicode HTML Entity or CSS rule for that icon to your clipboard, ready to paste into your web development tool of choice.</p>
<h2>What is Font Awesome exactly?</h2>
<p>Font Awesome is a font that\'s made up of symbols, icons, or pictograms (whatever you prefer to call them) that you can use in a webpage, just like a font.</p>
<p>Don\'t know how to set up Font Awesome? Go check out the offical <a href="http://fontawesome.io/get-started/" target="_blank">getting started guide</a>, or simply just include this line in your <code><head></code> tag:</p>
<div class="form-group"><label for="CDN Link">Add:</label><input type="text" value="<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">" class="form-control"></div>
<p class="small text-muted">(Font Awesome hosting very kindly provided by <a href="http://www.bootstrapcdn.com/#fontawesome_tab" target="_blank">bootstrapcdn.com</a>)</p>
<div class="alert alert-info">
<p><strong>Counterpoint</strong></p>
<p>Icon fonts aren\'t the only way to implement icons on the web. If you\'re looking for a explanation of using icon fonts vs. SVG files (another possible method), I\'d suggest reading this excellent post by Ian Feather: <a href="http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/"><em>Ten reasons we switched from an icon font to SVG</em>.</a></p>
</div>
<h2>How does it work?</h2>
<p>So, how do I add an icon to my webpage? Well, Font Awesome\'s icons can be used on the web in one of three ways.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
1. HTML Tag
</a>
</h3>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>You can use a simple <code><i></code> tag to place an icon in your page, like this:</p>
<p><code><i class=<span class="code-blue">"<strong>fa</strong> <strong>fa-home</strong>"></span></i></code> = <code><i class="fa fa-home"></i></code></p>
<ul>
<li>The first class—<strong><em>fa</em></strong>—is a base class. It tells the <code><i></code> tag, "hey, heads up: this is going to be an icon."</li>
<li>The second class (in this example, <strong><em>fa-home</em></strong>) points the <em>specific</em> icon you want to use. This one is an icon of a house!</li>
</ul>
<p>To use a HTML Tag for an icon, simply copy and paste <code><i class=<span class="code-blue">"<strong>fa</strong> <strong>fa-home</strong>"></span></i></code> anywhere within the <code><body></code> of your page.</p>
<div class="alert alert-danger"> <strong>Warning: Don\'t mix with other components</strong>
<p>Icon classes shouldn\'t be combined with other elements. They\'re designed to be standalone.</p>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
2. Unicode HTML Entity
</a>
</h3>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>This works slightly differently, by:</p>
<ol>
<li>Specifying the Font Awesome web-font in a CSS rule with <code><span class="code-pink">font-family</span></code></li>
<li>Using the Unicode HTML Entity to display the icon</li>
</ol>
<p>Firstly, the CSS rule. This should be placed inside a <code><span class="code-pink"><style></span></code> tag, or better yet, in a seperate stylesheet:</p>
<pre>
<span class="code-pink">span.icon {</span> <br />
font-family<span class="code-pink">:</span> <span class="code-blue">FontAwesome;</span> <br />
<span class="code-pink">}</span>
</pre>
<p>Next, the HTML Entity part:</p>
<pre>
<span class=<span class="code-blue">"<strong>icon</strong>"></span>&#xe021;</span>
</pre>
<p>The CSS rule specifies that any Unicode HTML Entity <em>inside</em> a <code><span class=<span class="code-blue">"<strong>icon</strong>"></span></code> tag will be rendered on the page as an icon.</p>
<p>The HTML entity inside the tag (in this case, <strong>&#xe021;</strong>) is a string of characters that tells the web-font to display a certain icon.</p>
<p class="well well-lg"><strong>Note:</strong> This method may offer you more flexibility (for example, you could use a <code><div></code> or <code><span></code> tag instead).</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
3. CSS Rule
</a>
</h3>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>This method works by including the rendering of the icon before the content using the <code><span class="code-pink">:before</span></code> CSS psuedo-element.</p>
<p>Firstly, the web-font is specified with <code>font-family</code>, and then the icon is specified by using the <code>content</code> property alongside a unicode hex entity (in this case, <strong>e021</strong>).</p>
<p>Because the hex entity is inside a style tag, it must be prepended with an escaped backslash, making it <strong>\e021</strong>.</p>
<p>This should be placed inside a <code><span class="code-pink"><style></span></code> tag, or better yet, in a seperate stylesheet:</p>
<pre>
<span class="code-pink">span.icon:before {</span> <br />
font-family<span class="code-pink">:</span> <span class="code-blue">FontAwesome;</span> <br />
content<span class="code-pink">:</span> <span class="code-green">"\\f015"</span><span class="code-pink">;</span> <br />
<span class="code-pink">}</span>
</pre>
<p>To add this icon to a page, add this HTML tag anywhere in the <code>body</code> of your page.</p>
<pre>
<span class=<span class="code-blue">"<strong>icon</strong>"></span></span>
</pre>
<p class="well well-lg"><strong>Note:</strong> This method is useful because it seperates the visual elements of your design—like icons—from the structural HTML, so you can add glyphicons to existing elements. Particularly useful for tasks like <a href="http://codex.wordpress.org/Theme_Development">Wordpress</a> or <a href="http://docs.moodle.org/dev/Themes">Moodle</a> theme development, for example.</p>
</div>
</div>
</div>
</div>
<h2>Examples</h2>
<div class="alert alert-info">
<p><strong>Note:</strong> For simplicity & clarity, in these examples Font Awesome has been paired up with the web components from Bootstrap 3. However, Font Awesome can be used in any website or web framework.</p>
</div>
<p>You can use glyphicons in a variety of ways; in buttons, button groups for a toolbar, navigation or prepended form inputs. Here are a few examples of glyphicons in action.</p>
<div class="well well-lg example">
<p>
<button type="button" class="btn btn-default btn-lg"> <i class="fa fa-star"></i> Star </button>
</p>
<pre><span class="code-yellow"><button type=</span><span class="code-blue">"button"</span> <span class="code-yellow">class=</span><span class="code-blue">"btn btn-default btn-lg"</span>><br />
<i class=<span class="code-blue">"fa <strong>fa-star</strong>"</span>></i> Star <br />
<span class="code-yellow"></button></span>
</pre>
</div>
<div class="well well-lg example">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default"><i class="fa fa-align-left"></i></button>
<button type="button" class="btn btn-default"><i class="fa fa-align-center"></i></button>
<button type="button" class="btn btn-default"><i class="fa fa-align-right"></i></button>
<button type="button" class="btn btn-default"><i class="fa fa-align-justify"></i></button>
</div>
</div>
<pre>
<div class=<span class="code-blue">"btn-toolbar"</span> role=<span class="code-blue">"toolbar"</span>> <br />
<div class=<span class="code-blue">"btn-group"></span> <br />
<span class="code-yellow"><button type=</span><span class="code-blue">"button"</span> <span class="code-yellow">class=</span><span class="code-blue">"btn btn-default"</span>> <br />
<i class=<span class="code-blue">"fa <strong>fa-align-left</strong>"</span>></i> <br />
<span class="code-yellow"></button></span><br />
<span class="code-yellow"><button type=</span><span class="code-blue">"button"</span> <span class="code-yellow">class=</span><span class="code-blue">"btn btn-default"</span>> <br />
<i class="<span class="code-blue">fa <strong>fa-align-center</strong>"</span>></i> <br />
<span class="code-yellow"></button></span><br />
<span class="code-yellow"><button type=</span><span class="code-blue">"button"</span> <span class="code-yellow">class=</span><span class="code-blue">"btn btn-default"</span>> <br />
<i class=<span class="code-blue">"fa <strong>fa-align-right</strong>"</span>></i> <br />
<span class="code-yellow"></button></span><br />
<span class="code-yellow"><button type=</span><span class="code-blue">"button"</span> <span class="code-yellow">class=</span><span class="code-blue">"btn btn-default"</span>> <br />
<i class=<span class="code-blue">"fa <strong>fa-align-justify</strong>"</span>></i> <br />
<span class="code-yellow"></button></span><br />
</div> <br />
</div> <br />
</pre>
</div>
<h3>Form Inputs</h3>
<div class="well well-lg example">
<div class="input-group input-group-lg col-md-6 margin-bottom-sm"> <span class="input-group-addon"><span class="fa fa-envelope"></span></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group input-group-lg col-md-6 margin-bottom-sm"> <span class="input-group-addon"><span class="fa fa-lock"></span></span>
<input class="form-control" type="password" placeholder="Password">
</div>
<pre>
<div class=<span class="code-blue">"input-group input-group-lg"</span>><br />
<span class=<span class="code-blue">"input-group-addon"</span>><br />
<i class=<span class="code-blue">"<strong>fa</strong> <strong>fa-envelope</strong>"</span>></i><br />
</span><br />
<span class="code-yellow"><input class=</span><span class="code-blue">"form-control"</span> <span class="code-yellow">type=</span><span class="code-blue">"text"</span> <span class="code-yellow">placeholder=</span><span class="code-blue">"Email address"</span><span class="code-yellow">></span><br />
</div><br />
<div class=<span class="code-blue">"input-group input-group-lg"</span>><br />
<span class=<span class="code-blue">"input-group-addon"</span>><br />
<i class=<span class="code-blue">"<strong>fa</strong> <strong>fa-lock</strong>"</span>></i><br />
</span><br />
<span class="code-yellow"><input class=</span><span class="code-blue">"form-control"</span> <span class="code-yellow">type=</span><span class="code-blue">"password"</span> <span class="code-yellow">placeholder=</span><span class="code-blue">"Password"</span><span class="code-yellow">></span><br />
</div> <br />
</pre>
</div>
<h2>Additional Reading</h2>
<p>Want more info on Font Awesome? Check out the <a href="http://fontawesome.io/examples/" target="_blank">official examples</a> in the Font Awesome documentation.
</div>
<div class="col-md-4">
<h1>About me</h1>
<p><a href="http://twitter.com/jamescroft"><img src="assets/img/james.jpg" alt="James Croft" class="img-circle" width="140" height="140" /></a></p>
<p>My name is <a href="http://twitter.com/jamescroft">James Croft</a>. I\'m a web developer from Brisbane, Australia.</p>
<p>If you found this page useful, consider buying <a href="http://bootstrapcheatsheets.com/shop" class="muted">a Bootstrap Cheat Sheet poster</a> for your wall!</p>
</div>
</div>
</div>
<footer class="col-md-12 text-center footer">
<p>My thanks to <a href="http://getbootstrap.com" target="_blank">Bootstrap</a>, <a href="http://fontawesome.io" target="_blank">Font Awesome</a>, <a href="http://pages.github.com" target="_blank">Github Pages</a>, <a href="http://www.google.com/fonts" target="_blank">Google Fonts</a>, <a href="http://jquery.com" target="_blank">jQuery</a>, <a href="https://github.com/DeuxHuitHuit/quicksearch" target="_blank">QuickSearch</a> and <a href="https://github.com/zeroclipboard/zeroclipboard" target="_blank">ZeroClipboard</a>.</p>
</footer>
<script type="text/javascript" src="assets/zeroclipboard-1.2.3/ZeroClipboard.js"></script>
<script type="text/javascript" src="assets/js/fontawesome-cheatsheet.js">
</script>
<script>
//Google Analytics goes here
(function(i,s,o,g,r,a,m){i[\'GoogleAnalyticsObject\']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,\'script\',\'//www.google-analytics.com/analytics.js\',\'ga\');
ga(\'create\', \'UA-46528775-1\', \'bootstrapcheatsheets.com\');
ga(\'send\', \'pageview\');
</script>
</body>
</html>'
# Print the match result
str.scan(re) do |match|
puts match.to_s
end
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for Ruby, please visit: http://ruby-doc.org/core-2.2.0/Regexp.html