Question

有趣的是，我遇到了一个有图像的网页，但是当我能够看到源代码时，我看不到它的来源，我指的是实际图像的链接。因为我正在开发一个网页（初学者），我想知道如何实现。我不确定它是图像，还是来自CSS。

enter image description here

以及下面的网站

https://www.debuggex.com/pricing

Answer 1

这不是图像，而是使用CSS指定的字符：

content: "\f023";

这是使用FontAwesome实现的。您可以将类应用于元素（在本例中为icon-lock），并使用此第三方开源软件自动应用样式。

Answer 2

因为这是标志性的字体设计，所以没有图像

如果您想加入项目，请添加css

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

然后使用这样的课程

<a href="#"><i class="fa fa-book fa-fw"></i> Library</a></li>

参考

http://fortawesome.github.io/Font-Awesome/icons/

http://fortawesome.github.io/Font-Awesome/examples/

Answer 3

在此示例中，它不是图像。挂锁是一种围绕样式（CSS）的字体和圆圈。

<span class="callout-pic"> <!-- Circle -->
    <i class="icon-lock"></i> <!-- Padlock icon -->
</span>

Answer 4

使用base64编码生成图像，

background: url(data:image/png;base64,.....)

参考：http://base64img.com/#encode

Answer 5

@GrantThomas是对的，内容在css中使用但基本使用调用系统符号示例版权符号，百分比符号，左右箭头和更多工作等。如果你想使用它，那么你不需要任何外部资源页。只需在你的系统中可用的页面调用字体和一些代码，如果你想要一些特定的符号，然后下载字体。

示例下载字体：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<title>DingbatsOne Regular Specimen</title>
<style type="text/css">
@font-face {
font-family: 'dingbatsoneregular';
src: url('dingbat1-webfont.eot');
src: url('dingbat1-webfont.eot?#iefix') format('embedded-opentype'),
     url('dingbat1-webfont.woff') format('woff'),
     url('dingbat1-webfont.ttf') format('truetype'),
     url('dingbat1-webfont.svg#dingbatsoneregular') format('svg');
font-weight: normal;
font-style: normal;

}
#target {font-family: 'dingbatsoneregular';}
#target:before {content: "A"; font-size: 200px;}
</style>
</head>

<body>
<div id="target"></div>
</body>
</html>

我是CSS和初学者的新手，但可能对你有帮助。

html中没有源链接的图像

5 个答案: