Using Icon Fonts in Google Sites

Icon fonts like Google Material Icons and Fontawesome are really cool, but how do you use them in Google Sites? Here's how.

How to use Icon fonts in Google Sites

Icon fonts like Google's Material Icons are a really useful way to add icons to any website; much better than using images. Using icon fonts is flexible, gives you more control over the presentation and scale well across devices.

But how do you use them in Google Sites?

Using CSS in Google Sites

Google Sites doesn't let you edit the native CSS so for each icon you want you'll need to embed the CSS. Note, this means if you want a lot of icons on your page, you're going to slow it down due to the amound of embedded CSS.

But here's how you do it:

On your web page, insert an Embed box anywhere. You can position and move the box afterwards, but simply add a box for now.

2. Add the CSS

Paste the CSS below into the new embed box.


<style>

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.material-icons.md-60 { font-size: 60px; color: #55595d; text-align: center; margin: 0 auto;display: inline-block;width: 100%;}

</style>

<div style="center"><i class="material-icons md-60">devices</i></div>


3. Hey presto

When you paste the code in using the 'Embed code' option, then click Next, you'll see this appear on your web page:

Resizing the embed box will help, and you'll be able to add it to other layout sections if you want to.

4. Going to town

To make it really useful, you can combine it with a layout section, as shown below:

Lorem ipsum

Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit.

Lorem ipsum

Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit.

Lorem ipsum

Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit.

Lorem ipsum

Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur aliquet quam id dui posuere blandit.

Using the @import function isn't good practice but hey, if it's the effect you're after, there you go.Â