html5 - Is this logo made using CSS styles?

Question

I looked at the source code for this kind of comment forwarding icon and it seems that it is not a picture. It seems to be a style. So how is this style made?

Answer 1

Iconfont implemented it: http://www.iconfont.cn/

Answer 2

Find this website for an icon, and then generate a css file. Just quote it when you use it

Answer 3

In fact, iconfont is used.
Set fonts that are not available in the browser’s system on the web page.
The browser downloads the font file and uses the corresponding font for rendering.

The so-called font is the graphic corresponding to the character encoding
For example, the phone icon below is actually a word
You can choose to copy and paste
But depending on the environment, the corresponding fonts are different
The display form may be different
In the worst case, it may be set If there is no graphic corresponding to this encoding in the font, it will not be displayed.
☎

For details, please see the use of iconfont

The advantage of this is obvious, the font is also text, and the font size, color, and decoration can be set following other text elements without scaling distortion

The disadvantage is also obvious, it is not a picture, so colorful icons like the picture cannot be realized

Answer 4

It’s implemented using icons. The one posted above is just a website. Let me tell you something specific.
1. First select the icon on the website and save it in a project, then download it locally (you can also use an online link here, the picture below shows the two operation methods, also in iconfont)

Introduce local or online links in 2.css (picture above), the local method is the same.

3. Specify the font-family as icon in the style to be used, and use the icon code, such as reloading the first icon on the way

.myIcon{
    font-family: icon;
}
<span class="myIcon">&#xe6d6;<icon>

Answer 5

The front end is really like the Eight Immortals crossing the sea, each showing its magical powers. In addition to icons, it can also do base64, svg and even canvas

Answer 6

The easiest way is to use bootstrap
http://v3.bootcss.com/compone...
link introduce bootstrap, and then just add the class name directly to the label
<button class="btn btn-default"> Fullscreen<span class="glyphicon glyphicon-fullscreen"></span></button>