Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Server-Side Enterprise Development with Angular

You're reading from   Server-Side Enterprise Development with Angular Use Angular Universal to pre-render your web pages, improving SEO and application UX

Arrow left icon
Product type Paperback
Published in Nov 2018
Publisher
ISBN-13 9781789806267
Length 142 pages
Edition 1st Edition
Languages
Tools
Concepts
Arrow right icon
Author (1):
Arrow left icon
Bram Borggreve Bram Borggreve
Author Profile Icon Bram Borggreve
Bram Borggreve
Arrow right icon
View More author details
Toc

Configuring Global Styles

The default generated Angular application does not have any styling. Angular does not dictate anything in terms of style. This means that in your own projects you can use any CSS framework like Bootstrap, Angular Material, Foundation, Semantic UI, or one of the many others.

Alternatively, it's possible to create a custom style from scratch to get a unique look and feel. For this book, though, we will stick to Bootstrap 4 and Font Awesome, as they are widely used and provide a decent style with a minimal amount of code.

Font Awesome is a so-called icon font. You can include it in your page and then use it to show icons by applying some classes to an empty <i class=""></i> tag.

Linking to the Stylesheets in the Global styles.css File

As mentioned in the previous section, the application has a global stylesheet named src/styles.css.

In this stylesheet, we will use the @import command to link to Bootstrap and Font Awesome. This will instruct Angular to download those files and apply the style to the application globally.

Note

For a list of all available icons, you can refer to the Font Awesome icon list at https://fontawesome.com/v4.7.0/icons/. For an overview of all available Bootstrap styles, you can refer to the Bootstrap 4 documentation at https://getbootstrap.com/docs/4.1/getting-started/introduction/. To easily apply a different theme to the app, you can switch out Bootstrap with one of the BootSwatch themes at https://www.bootstrapcdn.com/bootswatch/.

Exercise 5: Installing Bootstrap and Font Awesome

In this exercise, we will add Bootstrap and Font Awesome to the global stylesheet. Follow these steps to complete this exercise:

  1. Navigate to https://www.bootstrapcdn.com/.
  2. From the main page, find the Quick Start block and copy the link that says Complete CSS.
  3. Open the src/styles.css file in the editor.
  4. Add the following line at the end of the file:
    @import url('');
  5. Paste the link you copied in step 2 inside the quotes of the url( ) function.
  6. Navigate to the Font Awesome page on BootstrapCDN.
  7. Copy the link to the CSS file.
  8. Add the following line at the end of the file:
    @import url('');
  9. Paste the link to Font Awesome CSS inside the quotes of the url( ) function:
    Figure 1.5: Import URLs
    Figure 1.5: Import URLs
  10. Refresh the app in the browser:
Figure 1.6: Applying a different font to the application
Figure 1.6: Applying a different font to the application

As you can see, the font of the application got updated to a sans serif font, as that's the Bootstrap default.

Exercise 6: Using Bootstrap CSS and Font Awesome

In this exercise, we will update the template of AppComponent to show that Font Awesome works. Follow these steps to complete this exercise:

  1. Open the src/app.component.html file and replace its content with the following:
    <h1 class="text-center mt-5">
      <i class="fa fa-thumbs-up"></i>
    </h1>
  2. When the app refreshes, you should see the thumbs up icon in the center of the page:
Figure 1.7: The thumbs up icon
Figure 1.7: The thumbs up icon

Activity 1: Using a BootSwatch Theme

We can change the default Bootstrap theme with a different one. The BootSwatch Themes project (https://www.bootstrapcdn.com/bootswatch/) provides a lot of colorful themes that are a drop-in replacement for Bootstrap. This means that all of the Bootstrap CSS selectors will work — they just look different! In this activity, we will use a different theme for our app.

The steps are as follows:

  1. Navigate to BootSwatch Themes (https://www.bootstrapcdn.com/bootswatch/) on BootstrapCDN.
  2. Select one of the themes and copy the link to the CSS.
  3. Update the link to Bootstrap CSS in src/styles.css.
  4. Refresh the app in the browser and verify that the theme has been updated.

    Note

    The solution for this activity can be found on page 108.

Activity 2: Using Different Font Awesome Icons

Font Awesome comes with a large amount of icons that you can use once you've included the file. In this activity, we will use a different icon than the thumbs-up icon we have used already.

The steps are as follows:

  1. Open the src/app/app.component.html file.
  2. Navigate to the Font Awesome icon list at https://fontawesome.com/v4.7.0/icons/.
  3. Replace the value of fa-thumbs-up with another icon. Note that you always need the fa class.
  4. Refresh the app in the browser and verify that the browser now shows your new icon.

    Note

    The solution for this activity can be found on page 109.

You have been reading a chapter from
Server-Side Enterprise Development with Angular
Published in: Nov 2018
Publisher:
ISBN-13: 9781789806267
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime