Html button icon font

Icon Button CSS Styling Guide

This is episode #10 in a series examining modern CSS solutions to problems Stephanie Eckles has been solving over the last 15+ years as a front-end dev.

This guide will build on the previous episode «CSS Button Styling Guide» to explore the use case of icon buttons. We’ll cover icon + text as well as icon-only buttons.

Note: With SVG now having excellent support, the preferred practice is to use it for icon systems vs. icon fonts. We will not dive into SVGs specifically, but we will assume SVG icons are in use.

Icon + Text Button

First, let’s do the easier extend from our current buttons, and drop an svg icon next to the text:

a href="javascript:;" class="button"> svg class="button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false" > path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z" >path> svg> Button Link a>

There are 3 key features about the SVG for the icon + text use case:

1. Use of a new button__icon class
2. The viewBox value is tight to the icon boundaries, ideally a square for best results across the icon set even if the values have variance (ex. 24 vs. 32 )
3. For accessibility, we apply:

• aria-hidden=»true» — allows assistive tech to skip the SVG since it’s decorative and not providing any semantic value not already provided by the visible button text
• focusable=»false» — prevents a «double focus» event in some version of IE

For more on accessibility of icon buttons: Read this excellent article by Sara Soueidan who is an expert on both accessibility and SVGs

Icon Styling for Icon + Text

Due to display: inline-flex applied on the base .button , and no width attribute on the SVG, by default the icon is not yet visible.

So let’s first add dimensions to our new .button__icon class, using the em unit to keep it relative to the font-size in use:

.button__icon  // You may wish to have your icons appear larger // or smaller in relation to the text width: 0.9em; height: 0.9em; >

According to the spec default, SVG parts including path have a fill of black. To adjust this, we will use the special keyword currentColor which will extend the button’s applied text color to the SVG:

.button__icon  // . existing styles fill: currentColor; >

The last thing to adjust is to add a bit of spacing between the icon and button text, which we will again apply using the em unit:

.button__icon  // . existing styles margin-right: 0.5em; >

We need to add one utility class to allow the icon to be placed after the text, or at the «end» of the button (for right-to-left languages). We zero out the existing margin, and flip it to the left:

.button__icon  // . existing styles &--end  margin-right: 0; margin-left: 0.5em; > >

a href="javascript:;" class="button"> Button Link svg class="button__icon button__icon--end" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" focusable="false" > path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z" >path> svg> a>

Join my newsletter for article updates, CSS tips, and front-end resources!

Icon-Only Buttons

We’re going to make the assumption that we want both regular buttons (with or without icons) in addition to icon-only buttons. This is important because we will reuse the .button class in addition to a new class so that we don’t have to redefine the resets and base visual styles. The overrides are minimal.

a href="javascript:;" class="button icon-button" aria-label="Icon-only Button"> svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" class="icon-button__icon" aria-hidden="true" focusable="false" > path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z" >path> svg> a>

Changes from the icon + text button:

1. Addition of the icon-button class to the a
2. Addition of aria-label=»Icon-only Button» to provide an accessible text alternative since we have removed the visual text
3. Swap of the class on the SVG to icon-button__icon

Important: the value of the aria-label should describe what the button does not what the icon is. For further reading and other ways to provide a text alternative, see Sara Soueidan’s article

Here’s what we get before adjustments — an empty-looking button because we’re back to the no-width problem:

First, let’s create our new class. Due to the «C» in CSS, this rule needs to be placed after the .button rule:

.icon-button  width: 2.5rem; height: 2.5rem; padding: 0.35em; border-radius: 50%; &__icon  width: 100%; height: 100%; fill: currentColor; > >

We define a new width and height which is completely adjustable based on your design requirements, but it should equate to a square. This allows creation of a «circle» appearance when border-radius: 50% is applied.

Then, we add a touch of padding (again to your tastes/design requirements) to add some breathing room between the SVG icon and the button boundary.

Next, we define our icon-button__icon class. The difference here is that we want the width and height to match that of the container, so we set this to 100% . This allows extending to multiple size icon-only buttons by only redefining the font-size property on the .icon-button class.

It’s not quite what we want, but we can fix it by adjusting the following properties within the .button class. We’ll use the :not() selector to exclude the properties meant only for regular buttons:

.button  // . existing styles // Find these styles and update, not duplicate: &:not(.icon-button)  min-width: 10ch; min-height: 44px; padding: 0.25em 0.75em; > >

Now we have what we’re after:

Demo

Includes use of the .button—small class created in the previous episode, as well as a «real button» to validate that styles work just as well for both elements:

Try out ButtonBuddy to create accessible button colors. This web app I created will help get all the vectors of contrast right across your button color palette.

What to Read Next

Pure CSS Custom Checkbox Style We’ll create custom, cross-browser, theme-able, scalable checkboxes in pure CSS. We’ll use `currentColor`, the `em` unit, SVG, and CSS grid layout.

Guide to Advanced CSS Selectors — Part Two Continuing from part one, this episode will focus on the advanced CSS selectors categorized as pseudo classes and pseudo elements and practical applications for each.

CSS Tips in Your Inbox Join my newsletter for article updates, CSS tips, and front-end resources! Newsletter Signup

Custom Select Styles with Pure CSS Modern CSS gives us a range of properties to achieve custom select styles that have a near-identical initial appearance. This solution uses CSS grid, `clip-path`, and CSS custom properties.

Источник

How to add icons in the button in HTML?

In this article, we will show you how to add icons to your buttons in HTML. Icons are a great way to add visual appeal and enhance the usability of your buttons. They can be used to indicate the type of action a button will perform or make it easier for users to understand the function of a button.

Approaches

There are several ways to add icons to buttons in HTML, and in this article, we will cover two of the most popular methods −

Approach 1: Using Font Libraries

One way to add icons to your buttons in HTML is by using a font library. Font libraries are collections of scalable vector icons that can be easily customized and styled using CSS. The most popular font libraries are Font Awesome and Ionicons.

Step 1 − Include the CSS file for the font library in your HTML file.

Example

Here’s an example to demonstrate the same −

Step 2 − Use the appropriate class for the icon you want to use. For example, in Font Awesome, you would use the class «fa fa-icon-name» to add an icon.

Here, we are adding the right arrow icon −

Step 3 − Add the class to your button’s HTML code.

Step 4 − The complete code is given below (index.html file) −

Example

Here’s an example to demonstrate the same −

     button  
Welcome to tutorials point
 Next   

The above code uses the Font Awesome library for adding icons to the button. The first step is to include the CSS file for the font library in the HTML file. In this example, we use the CDN link for Font Awesome. Next, we use the appropriate class for the icon we want to use, in this case «fa fa-arrow-right» for the right arrow icon. We then add this class to our button’s HTML code, which is wrapped inside an tag. This will display the right arrow icon inside the button.

Approach 2: Using Image Files

Another way to add icons to your buttons in HTML is by using image files. This approach is useful if you want to use a custom icon or if the icon you want to use is not available in a font library.

Example

Here’s an example to demonstrate the same −

Step 1 − Create or download the image file of the icon you want to use.

Here, we are using a free icon website to download an icon.

Step 2 − Add the image file to your project’s directory by navigating and dragging and dropping in file explorer.

Step 3 − Add the html button element where you want to add the icon.

Step 4 − Use the «background-image» property in your button’s CSS to set the icon as the background image.

Step 5 − Add the appropriate CSS to position and size the icon.

Step 6 − Here is the complete code to implement the same −

Example

     .icon-button 
Welcome to Tutorials Point
 Next Next   

In this example, the first button uses the Font Awesome library to display an arrow icon, and the second button uses an image file as the icon. You can adjust the size and position of the icon using the CSS properties, such as background-size and background-position.

Conclusion

In this article, we have shown you two different approaches for adding icons to your buttons in HTML. Using font libraries is a quick and easy way to add icons to your buttons and offers a wide range of options. On the other hand, using image files gives you more flexibility and allows you to use custom icons or icons that are not available in font libraries. Regardless of which approach you choose, adding icons to your buttons can greatly enhance the visual appeal and usability of your webpage.

Источник

How to Add Font Awesome Icons to Your Buttons

Font Awesome is a convenient library of icons. These icons can be vector graphics stored in the .svg file format or web fonts.

These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.

Basic use

To include Font Awesome in your app or page, just add the following code to the element at the top of your HTML:

The i element was originally used to make other elements italic, but is now commonly used for icons. You can add the Font Awesome classes to the i element to turn it into an icon, for example:

Note that the span element is also acceptable for use with icons.

Here’s how you add an icon:

This will produce a simple thumbs up icon:

And here’s how you would insert that icon onto a button:

Notice that there are two parts to using an icon, the style prefix and the icon name. In the example above, the style prefix and icon name are fas and fa-thumbs-up , respectively.

Font Awesome offers the following style prefixes:

Style	Style Prefix	Plan Type
Solid	fas	Free
Regular	far	Pro
Light	fal	Pro
Duotone	fad	Pro
Brands	fab	Free

Brand icons are often submitted by the company itself, and are useful for building things like buttons for social authentication or payment. These icons include Twitter, Facebook, Spotify, Apple, and even freeCodeCamp:

While you’ll only have access to solid and brand icons under the free plan, there are still many ways to style them.

Styling Font Awesome icons

For simple applications, you could use inline styles:

For sizing, you could also use Font Awesome’s built in keywords:

An important thing to remember is that FA icons inherit the font-size of the parent container. This means that the icons scale with any text that might be used with them, which keeps the design consistent.

For example, say you want to create several buttons. The default size for the buttons is quite small, so you write some CSS to increase the size of the buttons, along with the text and icons within them:

You can also adjust an icon’s size directly by targeting the icon itself and adjusting its font-size .

Font Awesome is, well, awesome! As the most popular icon toolkits, it’s easy to include and use in all of your projects. Now go on icon up all the things.

More Information

Источник