Web Design Tips: Web page utility character icon instead of picture

Article Introduction: last week I presented an overview of the key issues of image processing in ' responsive design ': in particular, how to provide suitable images for various sizes of devices? Today I will seriously consider the "character icon", and we can use the "character icon" in our web page to replace some pictures, to achieve the same effect.

There are many advantages to the picture, however, the current design of the site in the industry faces a variety of challenges. The picture not only increases the size of the total file, but also adds a lot of extra "HTTP requests," which can greatly degrade the performance of the Web page. The picture also has a disadvantage is not good to "scale", so sometimes in the "response design" need to use the image of the best solution is not to use the picture.

Last week I presented an overview of the key issues of image processing in ' responsive design ': in particular, how to provide suitable images for various sizes of devices? Today I will seriously consider the "character icon", and we can use the "character icon" in our web page to replace some pictures, to achieve the same effect.

The advantages of the character icon

Bitmap pictures do not scale well, and when the picture is magnified it is distorted (that is, blurred), and the pixel is wasted when the picture is scaled down. and loading each picture requires an "HTTP request", and therefore slows down the entire load page time. In addition, if there is no picture editor (software), it is difficult to edit the image, processing and other operations.

Fonts do not have these problems, fonts can be scaled arbitrarily and no additional "HTTP requests" are required for each character. When we use fonts as words for writing, it is often not thought that they are just a shape. If you think of these fonts as icons, what will be the result? The

"character icon" is wonderful and magical, says Chris Coyier. He made the "character icon" on the demo page to List 6 big reasons why "character icon" is so wonderful and magical?

• easily zoom arbitrarily,
• easily change color,
• easily create shadows,
• can have transparent effects;
• Generally, there is advanced browser support;
• can be decorated with CSS (which can be well supported by CSS);
• can quickly transform the form (make some changes, such as hover, etc.);
• You can do things like pictures (change transparency, rotation, etc.);
• itself is smaller, but the information it carries is not cut.

Let's see how the bitmap works

How do I use character icons?

The first step to using the character icon is to find and embed the fonts. I'll tell you where to find them in the back of the article. When you have a font, you can use the font method to use it. I recommend this article Paul Irish wrote about the @font-face grammar.

For more Chinese tutorials on @font-face, there have been several tutorials in W3cplus, if you are very grateful for this interest, bash here. --Desert

Generally speaking, there are 3 ways to do this:

• Write the characters directly in the HTML file;
• Use CSS to generate content;
• With data-icon attributes

Write the characters directly in the HTML file

This method is simple and intuitive, see the following code, I use an element to contain a character "s" (that is, the letter "s"), and then add a class to this. This letter is mapped to a specific icon in the selected font.

s View Cart
		
 
To display the effect, you also need to write a style class that .icon determines what font style this character displays, as follows:
 
.icon
			{font-family:
									"your-chosen-icon-font";}
		
 
This is a simple example, but usually when you use letters as characters, the amount of information you carry is less. Letters can be read by screen readers, sometimes you just want to be seen only as a picture, there will be a group of people (such as visually impaired) need to listen to the content.
 
 
Using CSS to generate content
 
Let's go deeper and do not add characters directly to the HTML file, we use CSS to generate character content. See the code as follows:
 
 View Cart
		
 
As you can see, I added a class name "cart". The magic is happening in CSS, as above, the first step is to define a good font, and then we can use :before pseudo elements to produce character icons, where "before" indicates that the character appears on the left, "after" appears on the right.
 
.icon
			{ font-family:
									"your-chosen-icon-font";}
			.cart:before
			{content:
									"s";
					}
		
 
It is also necessary to use letters s to map out icons, except that the HTML tags are removed for use in CSS style implementations. That's a good thing, but the screen reader still reads the alphabet, which is not very good.
 
Using the "Data-icon" property
 
A similar approach to the above is to use the HTML5 "data-" attribute, and then we'll create a Data-icon property.
 
 View Cart
		
 
As with the above, we will also add the required font font-family, and then we use Data-icon to create letters (characters), such as:
 
.icon
			{font-family:
									"your-chosen-icon-font";}
			.icon:before
			{content:
									attr(data-icon);}
		
 
But the writing still appears to be the same as the one above, and the screen reader will still read the letters.
 
 
Better ways to Data-icon
 
To try to optimize the Data-icon method mentioned above, Chris Coyier gives two methods, one that uses a similar icon to represent a character, and the other is to use the standard icon picture directly.
 
Here's how the first approach, we add a new attribute to the current element: aria-hidden , and assigns a value of "true."
 
View Cart
		
 
aria-hidden=”true”is to prevent the reader from reading the characters directly, but it does not work for all platforms.
 
In combination with some CSS properties, you can write the following code:
 
[data-icon]:before
			{font-family: your-chosen-font;
					content:
									attr(data-icon);speak: none;}
		
 
The last one speak: none , in fact, the specific role is not very reliable, write this just in case, can be used, it can be useful. You can also post describing both methods from a post in Chris Coyier to see all the examples above to learn more.
 
 
What are the disadvantages of character icons?
So far, all we've heard are the advantages and benefits of character icons. Do character icons have no drawbacks? So, the next step is to talk about shortcomings, or bad. We've mentioned that we don't want screen readers to read our character icons, so let's mention something else.
 
  
        
 
   
         
They can only be rendered into monochrome or css3 gradients;
 
   
         
Your use of restrictions is great unless you want to take the time to create your own character icons;
 
   
         
It is time-consuming to author character icons.
 
  
        
The first is not a big problem because you won't use them everywhere, but it's because character icons are subject to color restrictions that make it not widely available.
The last two is not a big problem, a lot of free, excellent character icons continue to increase, so you can use these resources are constantly increasing, so do not necessarily go to the original character of their own icon.
From the above approach, we already know that there are two main ways to solve the problem with screen readers: the elements in HTML use aria-hidden attributes and the content is written in CSS. Another possible better way is to map the icons to the alphabet of the uniform character encoding standard. Many of the code that has not been coded for mapping can be used as an icon and will not be read by the screen reader.

where can I get a character icon? 
 The article begins by saying that it will guide you to get the character icon and start talking now. Here's a list of links, but I also believe that not only are there a few links to get the character icon you're satisfied with, but more people will create more icons in the future. 
 
  
        
 
   
         
 pictos 
 
   
         
 Fico 
 
   
         
 Sosa 
 
   
         
 Foundation 
 
   
         
 symbolset 
 
   
         
 Icomo On 
 
   
         
 entypo 
 
   
         
 fontello 
 
   
         
 shifticons 
 
   
         
 heydings Controls 
 
   
         
 A Delicious St Ack about icon fonts 
 
  
        
 
 If you're a talented person with the ability to create your own character icons, I'm sure the tools Web site listed below will help you. 
 
  
        
 
   
         
 glyphs font editor for Mac 
 
   
         
 font Creator for Windows 
 
   
         
 font Lab Studio 
 
   
         
tutorial using Photoshop, Illustrator, and glyphs 
 
  
        
 
 

The summary 
 Character icons are not suitable for all occasions, but they are excellent and prominent in the role of a certain icon. There are even more advantages than pictures, which are not only scalable but also easy to maintain, and can be manipulated in many different ways. 
 
 Indeed, character icons are not perfect, and there are some drawbacks. The problem of screen readers mentioned above will be continuously improved in the manufacturer ... 
 
 Character icons do not completely solve your response picture problems, but they are excellent if they act as part of this. 
 
 Next week I'd like to explore another solution to the problem of pictures but the current use is not very broad scheme, that is, "Scalable Vector Graphics" (SVG), it is a possible substitute for bitmap graphics technology. 
 
  Translator Sign Language:  the entire translation is carried out according to the original line, and in the translation process slightly individual understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you! 
 
 
        

         
   about spy 
  
         
 Formerly known as Wu Jianjie, commonly used nickname "Spy", now lives in Guangzhou. At present, continue to learn CSS3,HTML5 and other cutting-edge technology, to consolidate the basic knowledge of JS. In the process of front-end development, the pursuit of semantic HTML notes, reuse of CSS, JS package, and many other performance optimization operations, all based on user experience, and constantly pursue performance optimization. Hope that with more peer friends together: personal blog, Sina Meager. 
 
 
        
 
 If you want to reprint, please indicate the source: 
 
 English original: http://www.vanseodesign.com/web-design/icon-fonts/
 
 Chinese: http ://www.w3cplus.com/css3/icon-fonts.html