The goal of a website is to deliver information to the end-user. In this fast-paced world, using the quickest and easiest-to-digest style of information goes a long way to achieving that objective. An HTML icon is a great way to do just that.
In this brief guide, you will learn how to reference an HTML icon for use within your own webpage, as well as common icon library locations to pull from. This guide will assume you have basic knowledge in CSS and HTML.
If you need refreshers on either, please feel free to check out the blog posts HTML for Dummies and CSS Basics for Beginners to get caught up first.
What Is an HTML Icon?
HTML Icons are used to represent and relay information to an audience. They can direct users to take action, pay attention to important notes, or add decorative elements to the site.
It can be great to use various icons from several sources to enhance your HTML document. However, the icons should be used consistently. The end-user will need to understand the design and use of the icon to have the proper effect.
The following terms relate to common icon use. While not entirely necessary for using the icons in this guide, this knowledge can help you understand why you would use one library over another.
- Bootstrap: In the context of HTML icons, Bootstrap refers to a popular open-source design framework for website design. Bootstrap icons can be accessed and used in websites even if they do not use the Bootstrap framework.
- SVG: This is an acronym for scalable vector graphics. SVG is an image type that uses calculated lines and curves to form the image. The benefit of this is that the image has a great option for scalability.
- SVG Sprite: A method where multiple image files are set into a grid within a single file. These images can be referenced from the file. The benefit is that multiple image requests do not have to be made from the HTML document cutting down on potential resource waste.
How to Use an HTML Icon
To use an Icon, you first need to know where the library source is located. Much like a linked CSS stylesheet, an HTML icon is referenced from the source. This can be a path set up locally on your machine, or a link to an external source on the web. The latter option will be the focus of the guide.
In the image below you can see how an external CSS stylesheet is linked to an HTML document. This will be much the same as linking to an external icon library.
Linking to the HTML Icon Library
To create the link, you simply need to know where the icon library URL is. Once you have that, plugging it into the link element is a simple matter of replacing the href value. In the image below, the URL for the Font Awesome icon library version 5.11 has been used. Note that the rel, (or relationship), value is still set as a stylesheet.
Inserting an HTML Icon into the Page
With the HTML icon library now loaded for use on the page, you can call them for use. The icon has to be called per the library’s standards. For direct information on using Font Awesome icons, check out the main site at FontAwesome.com.
In this example, the Font Awesome library has the following direction for calling a smiley face icon.
class=”far fa-smile-beam”
Take note that copy/pasting the code alone will not put it on your page. It needs to be wrapped inside an HTML element as well. A widely used method for this is the “i” or “span” elements. However, you can use a paragraph, div, or even a heading element as well.
In the example below, you can see the smiley face icon called on the page several times using different HTML tags.
The CSS styling will generate the following output on the HTML page.
Even though we used different element tags, each icon was able to appear without issue. You may also have noticed that the last icon appears a bit larger than the rest. The size difference is because the element tag used was a number two heading. Heading tags include CSS properties that naturally increase their size. These added stylings also mean that you can apply your own CSS to style the icons even more.
In the example below, CSS styling was applied to the icon wrapped inside the div element. Note that you can also have multiple stylesheets and icon libraries linked into the HTML document at the same time as well.
The added CSS will provide the following render on the page.
Using Multiple HTML Icon Libraries
A great thing about CSS is that it lets you explore a wide range of creative freedom. That freedom does not change in regard to icon usage. You may call upon multiple stylesheets at once within a single HTML document.
In the sample code image below, notice that three separate icon libraries are being referenced with the link element.
Using CSS, you can also apply separate styling to each icon set. In the CSS example below, each of the icon sets was styled within a separate div container.
Utilizing that CSS will provide the following result on the HTML page.
Take Icon Usage Above and Beyond
Knowing how to add HTML icons is just the start. Consider what you could achieve by using the icons on the page for direct functionality instead of just flat images.
When you create HTML Forms, for example, you can add icons to help a user understand the fields they are filling out. In addition, you can also use the same idea on HTML Dropdown Menus to assist in user navigation. Another powerful resource is Javascript. By learning to Add Javascript to HTML, you can create wonderful animations and effects for your site icons.
With any option you choose, you can rest assured that it will all work to build your web design toolbox. The more tools you have, the more options you have available to tackle the professional world ahead. Just remember to have fun along the way.
Lastly, if you would like to check out the Bootstrap and Google HTML icon libraries for more details, please visit the following links respectively. A link for the Font Awesome icons is listed again for convenience.
______________________________________________________________________
Why stop at just using Javascript for HTML icons? The creative ability in programming is allowing people to do even more with their ideas. If you want to advance your career, take the first steps by learning to code. Having these skills can help you open doors to those new professional possibilities. Enroll in Udacity’s Intro to Programming Nanodegree today to start the journey.
