开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何将图标添加到HTML？

在HTML中添加图标可以通过以下几种方式实现：

使用图标字体：图标字体是一种包含了各种图标的字体文件。通过在HTML中引用字体文件，并使用相应的CSS类来显示图标。其中一种流行的图标字体是Font Awesome，它提供了丰富的图标库供选择。您可以在页面中引用Font Awesome的CSS文件，并使用对应的类名来显示图标。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
  <i class="fas fa-star"></i>
</body>
</html>

在上述示例中，我们通过引用Font Awesome的CSS文件，并使用<i>标签以及fas fa-star类名来显示一个星星图标。您可以通过查看Font Awesome官方网站了解更多可用的图标和类名。

使用SVG图标：SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以在不失真的情况下缩放。您可以使用<svg>标签来添加SVG图标，并通过CSS样式进行调整。可以通过在线SVG图标库或自定义制作SVG图标，并将其插入到HTML中。

示例代码：

<!DOCTYPE html>
<html>
<body>
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M12 2C6.486 2 2 6.486 2 12c0 5.514 4.486 10 10 10s10-4.486 10-10S17.514 2 12 2zm4.646 15.354L12 13.414l-4.646 4.94L7.586 16 12 11.586l4.414 4.414-1.768 1.768z"/>
  </svg>
</body>
</html>

在上述示例中，我们使用<svg>标签添加了一个星星图标，并在CSS中进行了样式调整。

使用图片作为图标：您也可以使用图片文件作为图标。可以通过<img>标签或者CSS的background-image属性来引用图片文件，并进行显示。这种方式适用于自定义的图标或需要使用真实图片作为图标的情况。

示例代码：

<!DOCTYPE html>
<html>
<body>
  <img src="icon.png" alt="图标">
</body>
</html>

在上述示例中，我们使用<img>标签引用了名为icon.png的图片作为图标。

无论使用哪种方式，您可以根据实际需求选择合适的图标，并通过CSS进行样式调整。如果您使用腾讯云，可以参考其提供的云产品和服务来支持您的HTML页面开发和部署需求。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

在 jQuery Mobile 中使用 UI 组件

jQuery Mobile JavaScript 库是一种强大的方式，允许用户通过 Web 浏览器直接连接到触摸友好的应用程序，从而让移动和平板设备可以访问移动应用程序。

02

Qt官方示例-系统托盘

❝该示例演示如何将带有菜单的图标和弹出消息添加到桌面环境的系统托盘。 ❞ 总结该示例的一些使用方法如下： 0x01 创建并显示一个系统托盘 #include <QSystemTrayIcon> Q

02

iOS APP添加桌面快捷方式

2）客户端通过OpenUrl调起Safari，再二次跳转到data url 技术实现方案是首先通过调起Safari，然后跳到一个Data URI Scheme形式下的HTML页面，而添加到主屏幕的也是这个Data URI Scheme形式下的HTML页面。 OpenUrl调起Safari的实现为： [[UIApplicationsharedApplication] openURL:[NSURL URLWithString:@"http:www.xxx.com"]]; 通过该方法即可调起Safari，让Safari访问附带的URL链接，在该功能实现中，URL链接指向一个Data URI Scheme形式下的HTML页面。如下图所示：

05

微搭发布的应用配置到企业微信的侧边栏

微搭可以发布模型应用，自动生成增删改查的页面。企业中的运营岗，日常需要和外部客户进行大量的沟通，我们可以借助微搭的自定义能力，将企业的常见信息如联系人、合同、跟进记录等进行线上的记录和管理。本文就介绍一下如何将微搭的应用添加到企业微信的侧边栏里。

00

windows server 2012 添加桌面图标

windows server 2012系统安装完以后桌面默认只有回收站一个图标，如何将window常用的图标（计算机、控制面板、网络、用户文件）的图标添加到桌面呢，下面为作者本人亲测。操作简单至极。

02

一步步教你用CSS添加SVG过滤器[每日前端夜话0x47]

自21世纪初以来，SVG就存在了，但仍有一些有趣的方法去用它。在本教程中，重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像，我将向你展示如何将它们应用于任何常规页面的内容上。

02

给WordPress博客添加返回顶部和底部的教程

今天就给大家分享下返回顶部那块的制作教程，其实也不难，主要是用到html、css和一些jq代码。

03

RTSP/ONVIF协议视频平台EasyNVR实现CDN流媒体转发

EasyNVR属于可拓展性强、开放度高、视频能力灵活的轻量级视频接入、处理及分发平台，在线下场景中使用十分广泛，如智慧水利、智慧工厂、智慧校园、智慧农场等等。

03

如何将你的 WordPress 网站置于维护模式

WordPress 维护模式是在开发阶段覆盖网站的理想方式。更新 WordPress 时，最好对访问者隐藏测试和错误。

03

从零开始使用 Astro 的实用指南

在这个实用的Astro指南中，我将指导你完成设置过程，并告诉你如何构造你的文件。你将学习如何添加页面、交互式组件，甚至是markdown文章。我还会告诉你如何从服务器上获取数据，创建布局，并使用vanilla JavaScript和其他框架添加互动性。准备好享受一些动手的乐趣，因为我们将一起创建一个小型的网站实例。我们将构建一个多页面的网站，包括一个博客。

04

可以将阿里图标库的icon、svg、unicode渲染到html的小工具 render.iconfont

推荐理由：可以将阿里图标库的icon、svg、unicode渲染到html的小工具 render.iconfont，可以将阿里图标库的 icon、svg、unicode 渲染到 html 的小工具，为什么要用这个组件，可以利用这个小工具快速、优雅的选择自己的想要的类型来添加自己喜欢的图标。怎么使用这个小工具，1.我们可以直接点击阿里的「iconfont」的下载代码，2.找到你下载好的代码，添加到你的项目中，3.记住你的路径，在你的 html 上，引入小工具，4.将需要图标化的容器，添加，并且定义类名或者 id，5.实例化小工具，配置项，path，描述：读取图标文件夹的路径，类型，默认值：`./icon/`，selector，描述：图标的容器，默认值，type，描述

00

一看就会的iconfont字体图标的使用方法--超简单!

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;

02

把网站变成exe程序，还能自定义图标

在“自解压选项”的“设置”中，设置“提取后运行”为：jshaman.hta，即刚刚创新建的hta文件。

03

Java事件处理基础实例：处理按钮点击+捕获窗口事件+改变观感

对于图形用户界面的程序来说，事件处理是十分重要的。要想实现用户界面，必须掌握Java事件处理的基本方法。本章将讲解Java AWT事件模型的工作机制，从中可以看到如何捕捉鼠标和键盘产生的事件。另外，本章还介绍如何使用最简单的GUI组件元素，如按钮，以及如何处理由这些组件产生的基本事件。在下一章中，将阐述如何将Swing提供的多个组件组织在一起，并全面地讲述这些组件产生的事件。

03

Confluence 6 配置白名单原

Confluence 管理员可以通过添加 URLs 到白名单选择出入的链接和使用 RSS 宏，HTML 包含宏和小工具中的内容。

06

简单实用的商品购物和添加购物车UI设计

这是一款使用jQuery和CSS3制作的简单实用的商品购物和添加购物车界面设计方案。用户可以在商品购物界面中预览各种型号、颜色、尺寸的商品。然后通过点击添加到购物车按钮就可以将该商品添加到购物车中，操作简单直观。

04

10分钟动手制作一个疫情小区防疫地图

最近有几个小程序可以查询你周边小区新型冠状病毒的确诊人数情况，通过这个小程序你可以看到你周围疫情的情况，具体如下图所示：

03

基于Vue2.x的UI组件库引入Iconfont图标库（引入第三方图标库篇）

本篇笔者将讲解在Vue项目中如何引入第三方图标库，如：Inconfont https://www.iconfont.cn fontawesome https://fontawesome.io/ 登录到Iconfont官网，然后选择你想要的图标，添加到购物车里。最后添加到你的项目里。

01

iOS APP添加桌面快捷方式

新接到一个需求，需要APP内的某些功能，能够把入口添加到桌面，点击桌面到入口可以直接跳转APP对应界面（类似于下面这张示例图），于是就做了一番调研。

04

一篇文章带你了解JavaScript 事件监听

大家好，我是前端进阶者。JavaScript事件处理程序的最新功能是事件监听。事件监听监视元素上的事件。

04

快速上手VueJS动画

动画可以使您的网站更具现代感，而且还能为网站带来更好的用户体验。幸运的是，对于开发人员来说，VueJS动画只需几分钟即可完成设置。

02

PWA应用的核心技术有哪些

在国内由于小程序的风生水起，PWA 应用在国内的状况一直都不是很好，PWA 和小程序有很多的相似性，但是 PWA 是由谷歌发起的技术，小程序是微信发起的技术，所以小程序在国内得到了大力的扶持，很快就在国内技术界开花结果。

03

自定义地址栏与收藏夹中的图标

favicon 在英文中有几个别名，叫做 shortcut icon，website icon，tab icon，URL icon，bookmark icon，对应中文来说也叫作网页小图标、网站缩略图或收藏夹图标、书签图标。这实际上就是与某个网站或地址关联的图标文件。如果网站上传了这个图标文件，用户使用浏览器（仅限于支持这个功能的浏览器）浏览时，就可以把图标显示在浏览器的地址栏中（有时也会显示在历史记录中），如果添加了收藏则收藏夹中也可以看到图标。现在支持标签页的浏览器，会将图标显示在标签上。对于移动终端，如果在系统中建立了网站的快捷方式，则可以使用图标来作为系统桌面的图标。

05

高德地图——标记「建议收藏」

标记显示地图上的单一位置。它可以使用一个标准的图标，也可以由开发者自定义图标。您可以通过 AMap.addMarker(MarkerOptions Options) 方法将一个标记添加到地图上。 MarkerOptions属性有： • position(Required) 在地图上标记位置的经纬度值。参数不能为空。 • title 当用户点击标记，在信息窗口上显示的字符串（测试发现，点击没有任何效果）。 • snippet 附加文本，显示在标题下方（测试发现，点击没有任何效果）。 • draggable 如果您允许用户可以自由移动标记，设置为“true ” ，默认情况下为“false ” 。 • visible 设置“false ” ，标记不可见。 • anchor图标摆放在地图上的基准点。 • perspective设置 true，标记有近大远小效果。 • 可以通过Marker.setRotateAngle() 方法设置标记的旋转角度，从正北开始，逆时针计算。

01

win10 Edge浏览器插件开发

win10最好用的浏览器-Edge 支持插件了是一个商机哦，可以把开发的插件发到应用商店，还能设置收费下载呢 Edge浏览器扩展API还在开发当中，目前已经支持了大部分的API 。查看具体的API支持情况，请参考supported APIs，查看API的开发进度-请参考extension API roadmap 。下面讲解下如何创建一个简单的插件并添加到Edge浏览器上。首先创建一个文件夹，命名为edgeExt。在这个文件夹里，新建一个manifest.json 文件，写入如下代码：

02

Serilog高级玩法之用Serilog记录所选终结点附加属性

这是该系列的第二篇文章：在ASP.NET Core 3.0中使用Serilog.AspNetCore。

01

使用Cloudera Manager查看集群，服务，角色和主机的图表

对于集群，服务，角色和主机，你都可以查看与之相关的各种指标的图标的仪表盘。虽然对于不同实体的指标显示是不一样的，但是基本功能都是一样的。

09

handsome自定义扩充iconfont图标及配色教程

本文只针对handsome主题，也是综合了在hexo和部分typecho主题中引入矢量图标的经验及网络上已有教程进行经验总结分享交流，有出入的地方还望大家指出，共同交流进步。

04

如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

WijmoJS Designer，一种全新的在线Web托管工具，为WijmoJS纯前端控件集提供了可视化设计图面和 Java代码生成器。 WijmoJS Designer允许用户创建控件实例，指定属性和事件，并生成可以合并到应用程序中的相应HTML 和 Java。WijmoJS 在线Web设计器对于开发网格和图表等复杂对象特别有用。

02

[教程]谷歌浏览器只能安装在C盘，教大家如何设置才能装在D盘

所以今天就教大家如何将谷歌浏览器从默认的安装在C盘，把它安装到D盘里或者其他的盘里

02

挑战微信、试探苹果？支付宝小程序可添加到 iOS 手机桌面 | 微观

作者：尹非凡 & 郑智文苹果松口了吗？知晓程序最新发现，支付宝小程序不仅可以添加到安卓手机桌面；而且，竟然也能被添加到 iOS 系统的手机桌面！对此，支付宝方面回应知晓程序，早在 2018 年 1 月，该功能便已经上线，但并未启动宣传。在此之前，无论是微信小程序还是支付宝小程序，一经上线便支持安卓手机将小程序添加到桌面端，小程序免下载、快速调取、简单易用的特点在安卓系统中得以全面展现。但 iOS 用户却仅能在两大 App 内才能使用小程序。如今，后于微信的支付宝小程序却率先出现在苹果手机的桌面，

02

前端学习自学笔记：day06

今天是第六天的笔记,主要是HTML和CSS的,希望大家支持~ 📷 在此之前先为大家显示下前端工程师的路线图: 📷 第六天的笔记:HTML AND CSS: text-center class属性：文本居中：例：your text btn class属性：Bootstrap风格按钮：例：按钮 btn-block class属性:使其按钮填满水平空间：例：按钮注意：添加btn-block时，也需要btn class属性。 btn-primary class属性：深蓝色：例：按钮 btn-info cl

05

PWA - 令人惊奇的web用户体验新方法

install 事件回调中有两个方法： * event.waitUntil()：传入一个 Promise 为参数，等到该 Promise 为 resolve 状态为止。 * self.skipWaiting()：self 是当前 context 的 global 变量，执行该方法表示强制当前处在 waiting 状态的 Service Worker 进入 activate 状态。 * 安装后( installed )：Service Worker 已经完成了安装，并且等待其他的 Service Worker 线程被关闭。 * 激活( activating )：在这个状态下没有被其他的 Service Worker 控制的客户端，允许当前的 worker 完成安装，并且清除了其他的 worker 以及关联缓存的旧缓存资源，等待新的 Service Worker 线程被激活。

01

理论 | HTML5 进阶系列：拖放 API 实现拖放排序

HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素都默认设置了 draggable 属性为 true，可直接拖放，如果不想拖放这两个元素，把属性设为 false 即可。拖放事件拖放事件由不同的元素产生。一个元素被拖放，他可能会经过很多个元素上，最终到达想要放置的元素内

03

蘑菇博客前端页面如何引入矢量图标

蘑菇博客前端页面最开始使用的图标都是一张张的 png 图片，在不同的分辨率上会出现失真的情况，后面在其它小伙伴的介绍下，我了解到了矢量图标。

03

SEO人员，如何为博客添加关键词？

如果你对SEO稍微有一定的了解，在创建自己博客之初，你可能早已想好，要为自有的博客添加什么类型的关键词。

00

怎么添加网站到谷歌站长工具（Google Search Console）

谷歌站长工具（google search console）是一款强大的SEO工具，它可以帮助我们了解网站在谷歌搜索引擎的表现，比如，网站的收录情况，关键词排名，网站流量等。通过了解网站的表现来制定更加科学合理的运营规划，更重要的是，它是完全免费的SEO工具。

01

用 Vue 开发自己的 Chrome 扩展

浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。

03

Flutter中构建布局顶

然后本指南回过头来解释Flutter的布局方法，并说明如何在屏幕上放置一个小部件。在讨论如何水平和垂直放置小部件之后，会介绍一些最常见的布局小部件。

01

手把手教你使用Next.js实现一个PWA应用

PWA（Progressive Web Apps），是一种可以提供类似原生应用体验的网页应用。简单的理解就是，可以让网页像原生应用那样在用户的设备上安装，并且能够实现离线工作、推送通知等功能，不知道你注意过没有，你偶尔会在chrome浏览器中可以看到一个这样的标志：

03

分享WordPress显示评论者IP的归属地及运营商信息的2种方案

张戈博客之前分享过一篇《WordPress 显示访客 UA 信息：Show UserAgent 纯代码轻度汉化版》的部署教程，算是满足了 WordPress 折腾爱好者的空虚和寂寞，不过这个插件只能显

06

如何在.NET电子表格应用程序中创建流程图

流程图是一种常用的图形化工具，用于展示过程中事件、决策和操作的顺序和关系。它通过使用不同形状的图标和箭头线条，将任务和步骤按照特定的顺序连接起来，以便清晰地表示一个过程的执行流程。

02

【进阶系列】地理位置专题

HTML5 Geolocation(地理定位)用于定位用户的位置。

03

基于 HTML5 结合互联网+ 的 3D 隧道

目前，物资采购和人力成本是隧道业发展的两大瓶颈。比如依靠民间借贷，融资成本很高；采购价格不透明，没有增值税发票；还有项目管控和供应链管理的问题。成本在不断上升，利润在不断下降，隧道产业的“互联网＋”迫在眉睫。隧道业的机械化程度高，机械制造和采购成本非常大，此外，隧道业的发展还面临建筑市场的严峻考验。“互联网+”提供大数据、信息流，为传统隧道企业由机械化向数字化挺进提供了机遇，隧道产业的建设工程需要持续的技术支持，也需要经验分享，如果可以借助互联网整理和分享相关经验，将为隧道产业发展带来智慧动力。

01

【博客美化】04.自定义地址栏logo

前言：当我们打开我们自己的博客的时候，比如用谷歌浏览器打开：显示的图标为博客园的默认图标那么怎么改成自定义的logo呢？？？ 1.首先得准备一个icon类型的文件方法一：我们可以在线制作一个i

如何将 JavaScript 文件引入到 HTML

JavaScript，也缩写为 JS，是一种用于 Web 开发的编程语言。作为与 HTML 和 CSS 一起使用的 Web 核心技术之一，JavaScript 用于使网页具有交互性并构建 Web 应用程序。遵循通用显示标准的现代 Web 浏览器通过内置引擎支持 JavaScript，无需额外的插件。

04

光纤交换机如何划分zone[通俗易懂]

说明：1.不同厂商的光纤交换机zone的划分类似，所以只要掌握了一种其他则可以触类旁通。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭