gpt4 book ai didi

css - 关于网站中带有 "i"的图标

转载 作者:太空宇宙 更新时间:2023-11-04 09:53:05 25 4
gpt4 key购买 nike

我是 HTML 的初学者。到目前为止,我已经了解了图像以及如何将它们包含在 HTML 中。我有一个正在研究的示例 Web 元素。它有一些如下的 html 代码

   <li><a class="close-link"><i class="fa fa-close"></i></a>
</li>

这段代码在前端创建了一个“CROSS”(X)图像/图标。

问题1:图片在前端是如何绘制的。通常为了获得图像,我会做类似 "<img src = "image.jpg>" 的事情.所以我很困惑“交叉”图像/图标是如何加载的。

问题 2:我可以在元素文件夹中的哪个位置找到此图像/图标。我无法在元素文件夹中找到它。是否有专门的文件夹来存放这些图像/图标。

问题三:这些图片的扩展名是什么? “jpg”“gif”还是什么?

问题 4:是否有这些类型的在线图像列表可供我在元素中使用。

问题 5:如果该列表在线不可用,那么我如何创建这样的图像并使用 i 标签添加它们。

请指导我。

最佳答案

回答 #1

是CDN content delivery network正在从互联网上获取资源我想你正在使用的是像 fontawesome 这样的框架这是链接(http://fontawesome.io/icon/times/)。

回答 #2

您在任何文件夹中都找不到图像,因为您没有下载它。但是你可以下载整个包然后你必须将该包链接到你的HTML用类似 <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 的东西在<head>你的html , 将位置引用到您的 font-awesome.min.css.这是说明的链接 ( http://fontawesome.io/get-started/ )

回答 #3

它们是 svg文件

回答 4 和 5

是的,有很多,您可以在其中找到它们,只需键入您要查找的内容,您甚至可以为这些图标设置动画。 ( http://fontawesome.io/examples/ ) 链接中的示例。只是一个快速的解释
i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

class用于描述图标的名称(是哪个图标)
fa-2x是图标的大小 fa-5x是最大的

关于css - 关于网站中带有 "i"的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38948939/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com