獲取<a ref> image icon

Question

Studying webpages to learn html/css/javascript

Got confused when I thought that most images were linked to or loaded locally... It seems like on spotify their search button is using something I don't understand to load the magnifying glass.

.spoticon-search-32:before { 
    content: "\f141"; 
    font-size: 32px; 
} 

If I edit content the picture of the search button goes away so I know its the content that is responsible for the picture. But where the hell is it loading it from? it's not a .png or .jpg extension either...

Answer 1

他們正在使用包含這些圖標的字體。我不知道他們使用的是哪一個，但這裏是另一個例子：

http://astronautweb.co/snippet/font-awesome/

element:before { 
    content: "\f000"; 
    font-family: FontAwesome; 

這將加載圖標。現在你只需要在span或i或別的東西上應用css選擇器。

Answer 2

It is something called an icon and it is basically a font which is why a size can be specified to make it larger or smaller. I suggest looking at Font Awesome以獲得更好的理解。