FreeCodeCamp(Part 2)
- Use Spans for Inline Elements
You can use spans to create inline elements. Remember when we used the
image.pngbtn-block
class to make the button fill the entire row?
This image illustrates the difference betweeninline
elements andblock-level
elements:
By using the span element, you can put several elements together, and even style different parts of the same element differently.
Yourspan
element should be inside yourp
element
- Create a Custom Heading
- Add Font Awesome Icons to our Buttons
Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the .svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.
You can add Font Awesome to any app just by including it by adding the following code to the top of your HTML:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
Thei
element was originally used to make other elements italic, but is now commonly used for icons. You add the Font Awesome classes to thei
element to turn it into an icon, for example:<i class="fa fa-info-circle"></i>
Use Font Awesome to add a thumbs-up icon to your like button by giving it an i element with the classes fa and fa-thumbs-up.