获取<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

这是一种称为图标的东西，它基本上是一种字体，这就是为什么可以指定尺寸使其变大或变小的原因。我建议查看Font Awesome以便更好地理解。

Answer 2

他们正在使用包含这些图标的字体。我不知道他们正在使用哪一个，但这是另一个例子：

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

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

这会加载图标。现在，您只需在span或i或其他内容上应用css选择器。