Table of Contents

More from the Blog

Categories
A banner with the words Tool Tip! and the words "Use icons on your docs and website" written on a small blackboard.

Using Icons in Websites and Documents

If you’re building a website or working on a document and you want to use some icons, where do you find them? A well-placed and well-designed icon can really give your site and files a professional look and feel.

There are many places to find them but you can quickly search Bootstrap, Font Awesome and Google via the Icon Reference page on the W3S site. Other icon sets, along with Font Awesome, are available from this Bootsnipp page.

From here, as the URL suggests, you can search the main open-source font sets using keywords. Or you can select a particular font set, if you have a preference.

The instructions below are for using the icons on your website. I’ll describe how to use them in a document in another post.

Search for an icon to use.

Type a relevant word into the Search box and click Enter. Keep in mind that most labels have a US focus, so you should look for trash instead of bin. In the example below, I searched for “home”. Scroll down the page to see the available options.

Get the link text for your icon.

When you’ve found the icon you want to use, click on it. This opens up a window showing the code to use for the icon. Press Ctrl+C to copy the code then OK to close the window.

Paste the code into your file.

Because the code is HTML, you need to make sure you are working in a format that can read it. If you are working in a WordPress template file (.php) or an HTML file, then you can just paste it in. If you’re in a blog post or page you will need to make sure it is read as HTML. In Gutenberg, do this by choosing the Custom HTML block type, which is listed under Formatting. If you’re using the Classic Editor, you should change to the Text tab and paste it in position.

Add a link to the icon source to your website’s header file.

When a browser reads an icon file link, t needs to know where to get that information from, so you need to put the link information in your website. The best place to do this is somewhere that’s related on the every page. In most WordPress template, these links will be there by default. If you find that your icons aren’t showing, check the header file, and if it’s not there, paste it in.You can find all the links on the Links for Font Icons page of this site.

That’s it! Just upload the edited header file to your server and your icons will be displayed. Here’s how my home icon looks on this page, with the icon code inserted here –>

For reference, here’s a link to my page with the icon source links:
Links for Font Icons

More Like This

Do you need someone to maintain your WordPress site?

Whether you’re looking for a monthly maintenance plan or occassional updates, we can help.

READ ABOUT OUR MAINTENANCE PLANS