Week 14: Bootstrap More

Bootstrap Icons

Bootstrap does NOT come with icons built in.
You need to import the icons as SVG, PNGs, or fonts.
There are several recommended sources.
Material Design Icons
Font Awesome
Iconic OpenSource
There are also paid versions of FontAwesome and Iconic which are great.
You may have used icons from the paid version of Iconic in MAD9014. I got permission for my licenced copy to be used as part of educational assignments.

Material Design Icons

The Material Design icons are rendered as a font. Each character in the font is another character in the font file.
You can use regular CSS to size and colour them.
First add the link to the CSS file in the HEAD of your HTML files, ABOVE the link to Bootstrap CSS.

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

Then choose the icons that you want from the icon library
Next, add them to your page using <i> tags and the material-icons class name.

<i class="material-icons">face</i>

The text inside the <i> is the name of the icon that you want rendered.
If you need to support older browsers (pre IE-11) then you will have to put the character entity for the icon you want.

<i class="material-icons">&#xE87C;</i>

Both the above will render as the face icon.
To colour it we could add another class name to the tag and then add the CSS to our own file to change it's appearance.

<i class="material-icons big-red">&#xE87C;</i>

.big-red {
  font-size: 6rem;
  color: red;
}

FontAwesome

To use FontAwesome, we import the CSS with a link inside the HTML <head>, ABOVE the Bootstrap CSS link.

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
  integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
  crossorigin="anonymous"
/>

Then we can select the fonts that we want to use here:
List of FontAwesome Fonts
Next, we can start added the icons to our HTML using the <i> tag, like Material Design Icons.

<i class="fas fa-arrow-circle-up"></i> <i class="fab fa-amazon"></i>

There are two classes to add.
The first one fas indicates that we want to use a font-awesome icon. fab indicates that it is a font-awesome BRAND icon.
Most of the icons are just fas ones.
The second class will select the icon we want.
In the example above we are selecting a circle with an upward arrow and the amazon logo.
You can then override the icon size and colour in your own CSS.

.fa-amazon {
  color: gold;
}
.fa-arrow-circle-up {
  font-size: 3rem;
  color: cornflowerblue;
}

Iconic Open Source

Iconic comes in two different types.
This is about the OpenSource free ones.
Start by downloading the .zip file from the Iconic homepage
You won't need the whole folder in your project, so don't save it inside your repo.
You will need the font/fonts/ folder with all the fonts.
You will also need the open-iconic-bootstrap.css file from the font/css/ folder.
Add the CSS link to the head of your HTML file.

<link href="./css/open-iconic-bootstrap.css" rel="stylesheet" />

Then you will have to make sure that the path to the font files is correct, inside the CSS file you just linked to.
The links in the CSS file look like this:

@font-face {
  font-family: "Icons";
  src: url("../fonts/open-iconic.eot");
}

The path needs to go from the location of your CSS file to the location of your fonts.
Once your CSS is set up and you have the fonts, choose from the list of icons
Then you can start adding the icons to your pages like this:

<i class="oi oi-wifi" title="wifi" aria-hidden="true"></i>

This would add the wifi logo to your page.
You can update the appearance of the icons just like you would for the other two.

.oi-wifi {
  font-size: 2rem;
  color: deepskyblue;
}

Iconic also has an SVG version, where you can include the .svg files in your project and then use width, height, and colour properties instead of including the CSS and font files.
Read more about SVG version

Icons in Buttons

You can add icons to buttons by nesting the <span> or <i> element inside the <button></button>
This can be done with any of the icon sets.
The icons, if you are using the font versions, will inherit the font size of the button (or any parent element).

Bootstrap Buttons

All the buttons in Bootstrap are styled with a base btn class.

<button class="btn">Click Me</button>

Then we can add other classes to determine the colours used for the text or the background of the button.
Here is the list of second classes for buttons
- btn-primary
- btn-secondary
- btn-success
- btn-danger
- btn-warning
- btn-info
- btn-light
- btn-dark
- btn-link
If you want buttons that appear as only outlines you can use any of these as the second class.
- btn-outline-primary
- btn-outline-secondary
- btn-outline-success
- btn-outline-danger
- btn-outline-warning
- btn-outline-info
- btn-outline-light
- btn-outline-dark
If you want to change the size of the buttons then you can also add one of either btn-large or btn-small to the button.
If you want the button to fill the width of the parent container then you would add the btn-block class.
If you want to stick two or more buttons together with no space between them, then wrap them in a div with the btn-group class.

<div class="btn-group" role="group" aria-label="Basic example"></div>

Bootstrap Forms

Bootstrap comes with a bunch of default styling for form elements as well as some extra classes.
Each label - input pair needs to be put inside of a div with the class form-group.
Each input control needs a form-control class name.
One exception to this is for input type="file". For those, use the class form-control-file.
When adding radio buttons or checkboxes we need to use different classes for the labels and the form controls. We would add form-check-label to the label elements and form-check-input to the radio buttons or checkboxes.
IF you want to add an extra line of instructions below the form control then you can use a <small> element and add the class form-text. The class text-muted can be added to change the colour but you can do this in your own CSS too.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input
      type="email"
      class="form-control"
      id="exampleInputEmail1"
      aria-describedby="emailHelp"
      placeholder="Enter email"
    />
    <small id="emailHelp" class="form-text text-muted"
      >We'll never share your email with anyone else.</small
    >
  </div>
  <div class="form-group">
    <input
      class="form-check-input"
      type="checkbox"
      value=""
      id="defaultCheck1"
    />
    <label class="form-check-label" for="defaultCheck1">
      Default checkbox
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Notice how the labels come AFTER checkboxes and radio buttons.
IF you want to make any of the form controls bigger or smaller then you can add the classes form-control-lg or form-control-sm
IF you want a small form that only has a couple inputs, like a search field and a button, and you want it to be a single line form then add the class form-inline to the <form> element.

Form Grids

You can also use the row and col-* classes to organize your form elements into grids if you want.

Form decoration

If you want to add special symbols to the form fields or partially fill in a field for the user then you can use the input-group-prepend and input-group-append classes.

<form>
  <div class="form-group">
    <label class="sr-only" for="twitter">Username</label>
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="twitter" />
  </div>
</form>

The class sr-only stands for screenreader only. It means that it will be read by a screen reader but not visibly shown on the page.

Form Validation

The small line of text shown under a form control is a perfect place to add information about successful or failed validation.
Read more about the validation classes

SVG Logos

If you are looking for a good source for free vector art logos, try WorldVectorLogo

← Week 13: More Bootstrap v4 Assignments →

# Week 14: Bootstrap More

# Bootstrap Icons

# Material Design Icons

# FontAwesome

# Iconic Open Source

# Icons in Buttons

# Bootstrap Buttons

# Bootstrap Forms

# Form Grids

# Form decoration

# Form Validation

# SVG Logos

Week 14: Bootstrap More

Bootstrap Icons

Material Design Icons

FontAwesome

Iconic Open Source

Icons in Buttons

Bootstrap Buttons

Bootstrap Forms

Form Grids

Form decoration

Form Validation

SVG Logos