Using Icon Fonts in Google Sites

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:

1. Create the embedded object

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:

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