Css all icons in one image

How to use icons in CSS ​

Using icons in CSS is easy: set icon as background or mask image, use simple element in HTML to render icon.

Skip to list of available tools if you want to skip long explanation of how it all works.

Advantages ​

It has advantages and disadvantages over using SVG in HTML.

However, it also has disadvantages:

• You cannot target elements inside icons, such as changing stroke-width .
• CSS usually contains all icons, including ones not used on current page.

How icons are rendered ​

There are two types of icons:

You can use both types in CSS.

Icons with palette ​

Icons with hardcoded palette are rendered as background images:

css .background-demo /* Add dimentions to span */
display : inline-block;
width : 32px ;
height : 32px ;
/* Add background image */
background-image : url ( ‘https://api.iconify.design/fluent-emoji-flat/alarm-clock.svg’ );
background-repeat : no-repeat;
background-size : 100% 100% ;
>

.background-demo—2 background-image : url ( ‘https://api.iconify.design/fluent-emoji-flat/memo.svg’ );
>

Monotone icons ​

Monotone icons are rendered as mask images with background color set to currentColor :

css .mask-demo /* Add dimensions to span */
display : inline-block;
width : 32px ;
height : 32px ;
/* Add background color */
background-color : currentColor;
/* Add mask image, use variable to reduce duplication */
—svg : url ( ‘https://api.iconify.design/bi/bell-fill.svg’ );
-webkit- mask-image : var (—svg);
mask-image : var (—svg);
-webkit- mask-repeat : no-repeat;
mask-repeat : no-repeat;
-webkit- mask-size : 100% 100% ;
mask-size : 100% 100% ;
>

.mask-demo—2 —svg : url ( ‘https://api.iconify.design/carbon/edit-off.svg’ );
>

.mask-demo—3 —svg : url ( ‘https://api.iconify.design/carbon/humidity.svg’ );
>

Using currentColor as background color makes it easy to change icon color by changing text color.

Tools ​

How to generate CSS for icons in the Iconify ecosystem?

There are several ways to do it:

• You can use Iconify API to generate CSS without writing any code.
• If you are using Tailwind CSS, you can use Iconify plugin for Tailwind CSS.
• If you are using UnoCSS, it has a built-in preset for icons.
• You can use Iconify Utils to generate CSS.

Custom plugin ​

Want to build a custom plugin that generates CSS?

Iconify Utils package includes all functions you need. Process of generating CSS is simple:

• Locate icon set file.
• Read it and parse JSON.
• Use getIconsCSS() or getIconCSS() functions to generate CSS.

Code samples that should help you:

Источник

4 Easy Ways to Add Icons In HTML CSS (Simple Examples)

Welcome to a beginner’s tutorial on how to add icons in HTML and CSS. Need to add some icons to your website? Make the contents a little easier to navigate?

There are various ways to add icons in HTML and CSS:

1. The easiest way is to use HTML symbols, simply copy-and-paste the respective HTML entity code. For example, ★ represents a star symbol.
2. Download icons images from websites such as FlatIcon, and use them as-it-is. E.G.
3. Use a set of font icons, such as Webdings. E.G.

   ABC

4. Lastly, load and use icon libraries such as Font Awesome and Material Icons.

But just how are these done exactly? Let us walk through some examples in this guide – Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

TABLE OF CONTENTS

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

ADDING HTML CSS ICONS

All right, let us now get into the various methods on how to add icons in HTML and CSS.

METHOD 1) HTML SYMBOLS

★ STAR!
 
☂ Weather report.
 
☃ Do you want to build a snowman?
 
☻ Happy face.

What kind of sorcery is this? Well, these are HTML symbols, and there are a ton of these – Everything from arrows, to symbols, to currencies, to smilies, and more. The best part is that they are baked straight into native HTML, and we don’t need to load 3rd party frameworks for these to work.

The usage is very simple, just define &#NUMBER; and it will “translate” into the respective HTML symbol. I will leave a link to the complete reference in the extras section below. Also, these symbols are treated just like text, we can control the size using font-size , even apply font-weight and text-decoration on it.

METHOD 2) ICON IMAGES

2A) FLAT IMAGE ICON

 So call me maybe?

So call me maybe?

This should be “Captain Obvious”, just insert an image icon. Do a search for “free icons” or “free clipart”, they are all over the Internet.

2B) IMAGE FONT SET

Following up on the above image icon method, it is inefficient to use one icon per image. This is the smarter way where we combine all the icons into one single image, but it requires a little bit of CSS to work.

 .ico < display: inline-block; width: 32px; height: 30px; background-image: url('icon-set.png'); background-repeat: no-repeat; >.ico-screen < background-position: 0 0; >.ico-phone < background-position: -32px 0; >.ico-pc < background-position: -64px 0; >.ico-tablet < background-position: 0 -31px; >.ico-camera Screen Phone PC Tablet Camera

That’s right. All we are doing here is to use the icon set as the background image, then “map” them using background-position .

METHOD 3) ICON FONT SET

 @font-face < font-family: Heydings; src: url(heydings_icons.ttf); >.icon  

Fonts usually contain alphabets, but there are some interesting ones that are sets of icons instead – All we have to do is to find these sets of icons, include them using CSS @font-face , then use it just as usual.

I will leave links to free font websites in the extras section below, just do a font search for “icons”, and there will be plenty more. But please do take care that not all fonts are “fully free”… Some are free for personal use, but not for commercial use.

METHOD 4) ICON LIBRARIES

4A) FONT AWESOME

• Load the Font Awesome library from the CDN. There are a lot of versions… If unsure, just load all.min.css which contains everything.
• To insert an icon, use the tag, and give it a CSS class=»fa fa-ICON» – Check out the Font Awesome Gallery for the full list of available icons.

Of course, if you somehow need even more icons, there are also paid plans on Font Awesome.

4B) MATERIAL ICONS

Material Icons is another set of popular free icons, which you may find very familiar… Because it’s by Google. Check out their page on Google Fonts for the full list of icons.

EXTRA BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

WHICH IS THE BEST METHOD?

• I personally prefer HTML symbols when it comes to small projects, as it is the most lightweight option. But take note that some symbols will not show up properly on the older browsers, you will not want to use this if backward compatibility is an issue.
• Images are the safest and will always work, but they add to the loading time bloat.
• Font Awesome and Google Material Icons are also pretty safe options but they bloat the loading time as well.
• Loading fonts are kind of meh.

LINKS & REFERENCES

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Источник

Display icons using a single image and CSS “Sprites”

Recently, I have been working on a website that has numerous icons being displayed on a single page. One of the ways to reduce server requests is to store all of your icons in a single image and use CSS to display only the portion of the image you need for a particular location on your page. This technique is commonly used by designers to display icons from a single image. It is often termed CSS sprites.

First, lets take a look at an image with the icons we will be using. I have chose these grunge icons for this example. You can find icons on just about any stock photography site or if you are adventurous make your own.

The setup

First, we need to figure out the grid of the icons on this image. The image dimensions are 204 pixels wide by 136 pixels high. Simple math tells us the height of each icon is 68 (136 ÷ 2). The width of each image is also 68 (204 ÷ 3). Nice!

Using CSS, we will display each icon in it’s own DIV tag. To do this, we will use the left and top values of the background-position property. The background-position property defines the initial position of a background-image. You can find specifics of the background-image property at w3c.org. I prefer to map out each of the icons top and left coordinates before I write the CSS. It makes it much easier. Here is the image with the coordinates mapped out for you.

Those aren’t coordinates! Well, no. They are not Cartesian or polar coordinates. They are a special type of coordinate that defines the leftmost and topmost margin of the given image. Negative margins shift the image up and left. So the coordinates (-136,-68) when used in the CSS property of background-position:-136px -68px would render the margin to start at the top left corner of the shopping cart icon in this image. So with that in mind, we can now build our containers for the icons.

When I’m developing I like to break out my CSS into logical functions. In this case I want to create a class for the container that will contain the icon. Something like this should do just fine.
.icon height:68px;
width:68px;
background-image:url(‘images/web_icons.png’); /*your location of the image may differ*/
>

A base class now exists that pulls the proper image that contains the sprites as well as defines the height and width of the container. Next, we need to create a
class that will display the given icon from the image. I like to break this out by icon type. Here are the classes I set up for this image.

.person
.info
.upload
.document
.check
.cart

The final step to get these to display is to create the containers. We need to create six separate containers and add the proper classes. Here are the divs we will use to display the icons.

In the above example, I have taken the class .icon and the class representing that icon and put them together in the class attribute. Using multiple classes is a great way to apply styles without having to repeat code in your CSS.
The following screenshot shows you how the code to this point should render in a web browser:

Conclusion

With a single image and some CSS styling you can easily display various parts of the image on your page. The options are limitless. Using floats and absolute positioning you could place the containers anywhere on the page. You can easily apply the :hover pseudo-class to the appropriate element and have the image shift when the cursor is over that element. We will address this in another tutorial. Do keep in mind that there are some browsers that don’t support the :hover pseudo-class, namely IE (big surprise!).

There are sites that use CSS sprites extensively. I came across one just the other day. Kaleidoscope essentially uses one large image for many of the graphics on their home page. You can see the full image here. While keeping server requests down may seem minor it is the kind of foresight and good coding that can help a site become scalable in the long run.

Источник