bugl
bugl
HomeLearnPatternsPathsSearch
HomeLearnPatternsPathsSearch

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Icons - Google

Flash cards

Review the key moves

1/4
Core idea

What is the main idea behind CSS Icons - Google?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

<!___ html>

Google Icons

To use the Google icons, add the following line inside the <head> section of your HTML page:

Note

No downloading or installation is required!

Example

Formatted code
<!DOCTYPE html>
<html>
<head>

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

<i class="material-icons">cloud</i>
<i  class="material-icons">favorite</i>
<i  class="material-icons">attachment</i>
<i  class="material-icons">computer</i>
<i  class="material-icons">traffic</i>
</body>
</html>

Live preview

For a complete list of all icons, visit our Icon Tutorial .

Previous

CSS Icons - Bootstrap

Next

CSS Links