Let the UI girl go, Let me (on), the ui girl

Let the UI girl go, Let me (on), the ui girl

I. Preface

• What we want to learn today: Today we will summarize a little bit about how to replace images with fonts on the page, which saves time, convenience, and practicality!
• Xiaosu: all people are inert. True. At the beginning, we had an experienced artist who had a very good relationship with us, so that every time I waited for her to give me the design drawing, I started to code html. If you encounter a picture, you can cut it by yourself. If you don't, you can just cut it for me. It's a brainless code farmer! Now, the new artist is too busy. In addition, we may not be familiar with front-end interaction. Now, the prototype is shown in the figure below. If I can contact an artist, I will not contact an artist. Do it yourself! Haha.

Ii. Text

• If the following two images (right-click the image and open the image in the new window, you can see the big picture, which is clearer), in addition to text, how do you do the pictures above? If it is replaced by images, you will learn new skills today. If you are not using images, well, this article is out for you. You don't have to look down. Haha!

The above image uses the Font Awesome vector icon, which can be directly used with CSS to change their size, color, shadow, or any other supported effects. It is summarized as follows:

• Why should we use icons?

Icons can send a large amount of information to help people understand what they see in semantics. Now we can see that all kinds of buildings are represented directly by icons instead of text, the icon can more visually express what you want to express. Therefore, using icons is very important. If all your websites use text instead of icons, you will always feel something missing, which is aesthetic.

• What is Font Awesome?

Font Awesome is a set of icon fonts designed to work with Bootstrap, but we can also use it directly. It is a css framework-based font icon library for webpages, [completely free ].

Ps: for the word "completely free", rvalue of the blog park friends gave me some advice (Thank you very much for this great god ):

[Font Awesome fonts are licensed according to SIL Open Font License;
Font Awesome CSS/LESS/SASS and other code are licensed according to the MIT License;
Font Awesome documents are licensed under the cc by 3.0 License Agreement .]

Advantages:

Reference Method:

Usage:

Code details

• The html code on the left is as follows, which can be easily implemented, and the hover and click colors can be set directly. Unlike the previous steps, three images will be used for replacement, which is troublesome:

1 <div class = "left"> 2 <ul class = "cleanfloat"> 3 <li> <span class = "fa-home fa-fw"> </span> home </li> 4 <li class = "on1"> <span class = "fa-home fa-fw"> </span> home </li> 5 <li> <span class = "fa-user-circle fa-fw"> </span> customer </li> 6 <li> <span class = "fa-user- circle fa-fw "> </span> customer </li> 7 <li class =" on2 "> <span class =" fa-bell fa-fw "> </ span> message </li> 8 <li> <span class = "fa-bell fa-fw"> </span> message </li> 9 <li> <span class = "fa-bar-chart fa-fw"> </span> Report </li> 10 <li> <span class = "fa-bar-chart fa- fw "> </span> reports </li> 11 <li> <span class =" fa-penpencil fa-fw "> </span> Applications </li> 12 <li> <span class = "fa-penpencil fa-fw"> </span> application </li> 13 <li> <span class = "fa-cog fa -fw "> </span> Settings </li> 14 <li> <span class =" fa-cog fa-fw "> </span> Settings </li> 15 </ul> 16 </div>

• The implementation html code in the upper-right corner of the image is as follows:

1 <ul class = "cleanfloat"> 2 <li class = "onC1"> <a class = "fa-search"> </a> query </li> 3 <li> <a class = "fa-refresh fa-spin"> </a> refresh </li> 4 <li> <a class = "fa-share-alt "> </a> share </li> 5 <li> <a class =" fa-sign-out "> </a> cancel </li> 6 <li> <a class = "fa-power-off"> </a> exit </li> 7 </ul>

It's a bit cool to write it again. I personally think this is simple and easy to use. It is really practical!

Iii. Summary

Today, I just want to give Xiao Bai a brief introduction to this knowledge. I personally think it is very practical. At least it is not always difficult to design small icons for the ui girl. You can also control the size and color. It seems that I have a lot of nonsense. I hope you will criticize and advise me!

This article only tells you that some small icons can be designed without the ui sister, but some colors, layout, compared with the ui sister, there will still be a big gap.

Ps: in fact, it took a day to draw pages and adjust styles. But when I write it, I don't know what to write. Alas, it's a bit frustrating!

Ps: the last article I wrote about css to easily achieve pentagram scoring, thumb-up collections, and display ratings (half and 1/3 stars) was removed by many people without specifying the source, this is a bit unfriendly. The key is that the posting time displayed in some places is still before my time. It is really speechless! I would like to welcome you to repost the statement, but please keep the Declaration and source to respect everyone's Labor achievements!