首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有其他不使用bootstrap就能获取图标的方法?

当然有!Bootstrap 是一个流行的前端框架,其中包括了一套图标,但如果你不想使用 Bootstrap,还有许多其他方法可以获取或创建网页图标。以下是一些流行的替代方案:

1. Font Awesome

Font Awesome 是一个非常流行的图标库,提供了大量的免费和付费图标。它不依赖于 Bootstrap,并且可以很容易地集成到任何网页项目中。你可以通过添加一个简单的链接到你的 HTML 来使用 Font Awesome:

代码语言:javascript
复制
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

然后,你可以像这样使用图标:

代码语言:javascript
复制
<i class="fa fa-user"></i> <!-- 用户图标 -->

2. Google Material Icons

Google 的 Material Icons 也是一个很好的资源,提供了一系列的图标,这些图标遵循 Material Design 指南。它们同样容易集成:

代码语言:javascript
复制
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

使用示例:

代码语言:javascript
复制
<i class="material-icons">face</i> <!-- 表情图标 -->

3. SVG 图标

使用 SVG (Scalable Vector Graphics) 文件直接在你的网页中嵌入图标。这种方法的好处是图标可以轻松地进行样式化和缩放而不会失真。你可以从各种在线资源(如 SVGRepo, SVG Silh 等)下载 SVG 图标,或者使用设计软件(如 Adobe Illustrator)自己创建。

使用 SVG 图标的示例:

代码语言:javascript
复制
<svg width="24" height="24" viewBox="0 0 24 24">
    <path d="..."></path>
</svg>

4. Icon Fonts 自定义

如果你有特定的图标需求,你可以使用工具如 IcoMoon 或 Fontello 来创建自定义的图标字体。这些服务允许你从大量图标中选择,或上传自己的 SVG 图标来创建一个自定义的图标字体集。

5. CSS 图标

对于简单的图标,你甚至可以只使用 CSS 来创建。这种方法不需要任何外部资源,但是创建复杂图标可能会非常繁琐。

CSS 图标示例(简单的圆形):

代码语言:javascript
复制
<div class="circle"></div>

<style>
.circle {
    width: 50px;
    height: 50px;
    background-color: blue;
    border-radius: 50%;
}
</style>

6. 使用其他图标库

还有许多其他的图标库,如 Icons8、Feather Icons 等,它们提供了多种风格和大小的图标,适用于各种项目。

选择哪种方法取决于你的具体需求,如项目的大小、图标的复杂性、是否需要额外的依赖等。每种方法都有其优点和局限性,你可以根据项目的需求来选择最合适的一种。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

终于有人把怎么搭建数据指标体系给讲明白了,数据分析师必备

是指标之间的关系,以及指标的使用方法2:指标体系的构成 所以,指标体系由三部分构成:指标库、关联关系,以及指标体系的使用指南。 快问快答:以最基本的“利润 = 收入 - 成本”为例。...构成,因为还缺失在具体场景下的使用方法。 假设我们用“利润、收入、成本”去衡量某公司的经营情况。五月份的收入是8000万,成本是6000万,利润是2000万。请问这个公司的经营状况如何?...所以说: 【√】使用方法对于指标体系而言是不可或缺的。 【×】指标体系不是指标的罗列。 【★】“和自己比、和目标比、和市场比”的三板斧是非常基础、非常有效、非常落地的比较方法。...以传统保险业务为例,参与的主要主体有6个:保险人(保险公司)、保险业务员、投保人、保险标的(被保人/被保财产)、受益人、其他第三方。...在营销场景下,主要是保险人、业务员、投保人之间的关系较为紧密;而在理赔环节,则是保险标的、受益人、保险人、投保人、其他第三方之间的关系较为紧密。

2.8K32

你不可能知道的骨架屏玩法!

可能文“对不起”题,知道的大佬别进来了,,求吐槽、拍砖,瑞思拜。 感谢昊神赐题,不要怪ssh,怪我。 本文可能存在有些纰漏,希望大家多拍砖、建议,谢谢。...那就是让用户可以更快看到非“白色”,可以能联想到的,背景底色、背景、关键部位图等。 不知道大家有没有使用过骨架屏,下面我们就是用类似骨架屏的能力去解决这个问题。...预渲染DOM 在开始前,先看看这个,表示了我们大致的流程,有迷路。 不知道大家有没有听说过puppeteer,一个无头浏览器,它能做什么呢?...还有其他办法吗? 方法二:单独图片域名 我们知道http1.1同域名下,限制6个链接,那我们可以试试多个域名?给图片另一个独特域名。 <!...看起来也挺好的,是不是,还有没有其他方式呢? 方法三:降低其他资源优先级 通过优先级表,我们知道如果把JS延后加载,相对于就是提前了图片加载。 我们先可以考虑下async、defer标记。

1.8K20
  • 前端:你可能不知道的骨架屏方案设计

    那就是让用户可以更快看到非“白色”,可以能联想到的,背景底色、背景、关键部位图等。 不知道大家有没有使用过骨架屏,下面我们就是用类似骨架屏的能力去解决这个问题。...image.png 预渲染DOM 在开始前,先看看这个,表示了我们大致的流程,有迷路。 image.png 不知道大家有没有听说过puppeteer,一个无头浏览器,它能做什么呢?...image.png 还有其他办法吗? 方法二:单独图片域名 我们知道http1.1同域名下,限制6个链接,那我们可以试试多个域名?给图片另一个独特域名。 <!...image.png 看起来也挺好的,是不是,还有没有其他方式呢? 方法三:降低其他资源优先级 通过优先级表,我们知道如果把JS延后加载,相对于就是提前了图片加载。...结合运行时动态生成的css、提前获取的页面dom结构、加载的图片,一个大致的“骨架”就呈现了。 最后对于图片加载做了一些讨论。

    2.1K20

    从0到1,掌握数据可视化的基本技巧

    A7:做要符合基本规范,刻度尺、数字、数字单位要三样齐全,就能避免被忽悠 当两张摆在一起的时候,坐标轴的最大值,最小值要保持一致,最小值从0开始。...2、报告一个东西内部结构,用饼。 3、报告短期的(10个以内的)数据,用柱形。 4、报告连续性结构变化,用堆积。 这样就能简单清晰地呈现情况了。 Q9:哦,懂了,还有没有类似的基本规范?...观察两个指标的关系,用散点图 表达一个指标的变动情况,用瀑布 表达两个东西的多个指标对比,用雷达 表达一个流程,逐步向下转化,用漏斗 这些都是基础做法。...后边有机会具体跟大家分享 Q10,嗯,明白了,但这样看不够炫酷,看着厉害啊,有没有超厉害的那种? A10:额,不管说什么内容,一味追求炫酷,是可视化的最常见问题哈。...喜欢的话请点个赞,点个在看,谢谢啦~~ 关注微信公众号【码工小熊】获取更多原创干货~ 二维码.jpg

    52500

    Zabbix自定义监控&Grafana图表配置

    :是你要实现监控所执行的命令,比如你要获取数据库某个数据,那这个命令就包含连接数据库以及获取数据的sql语句。...举个例子,我想监控登录我服务器的用户连接数,这个目的通过sh指令: # who|wc -l 3 就能够做到,所以我们直接在zabbix_agentd.conf文件的最后一行加上: UserParameter...Type可以选择对应的数据类型,Units单位可有可无,Update interval是获取监控值的时间间隔,建议填太短,以免造成压力,History storage period历史保留周期太长的话数据量会越来越大...,其他的看需要填就好。...创建Grafana监控 如果想要更好看的图表,那就需要去Grafana配置了,这里默认你已经搭建了基于zabbix数据的Grafana服务,具体内容本文细表。

    1.1K10

    jvm启动加载类的全过程,全网最全一篇,告诉你什么是双亲委派机制

    类加载系统架构图 暂时看不懂这两张没关系,跟着老哥往下看 ? ? 类的生命周期 类的生命周期包括:加载、链接、初始化、使用和卸载,其中加载、链接、初始化,属于类加载的过程,我们下面仔细讲解。...直接引用就是直接指向目标的指针、相对偏移量或一个间接定位到目标的句柄。 解析动作主要针对类、接口、字段、类方法、接口方法方法类型等。...第一个:启动类/引导类:Bootstrap ClassLoader 这个类加载器使用C/C++语言实现的,嵌套在JVM内部,java程序无法直接操作这个类。...从可知rt.jar核心包是有Bootstrap类加载器加载的,其内包含SPI核心接口类,由于SPI中的类经常需要调用外部实现类的方法,而jdbc.jar包含外部实现类(jdbc.jar存在于classpath...路径)无法通过Bootstrap类加载器加载,因此只能委派线程上下文类加载器把jdbc.jar中的实现类加载到内存以便SPI相关类使用

    1.7K40

    干货分享: 常用临床科研软件教程免费下载

    在写文章的迢迢征途中,你有没有 惊叹于别人文章中数据处理的行云流水! 艳羡于别人作图的高端大气! 惊讶于别人插参考文献的整齐快捷! 工欲善其事必先利其器!...科研统计绘图软件 01 | SPSS 20 它的主要功能就是数据录入、管理、统计分析、图形绘制等,并且软件本身以及功能方面也还在不断完善、同时使用方法非常简单,临床科研新手必备。...这是一款可以处理科研用的神器,不管是示意图模式、信号转导通路、通过R或者数据处理软件得到的生,还是需要后期排版的图表,用AI都可以分分钟搞定。后台回复“8”,获取永久使用链接。...引物设计软件 01 | Primer premier 5 软件有优秀的引物自动搜索功能,同时可进行部分指标的分析,而且容易使用,被引物设计行业人士认为是一款相当不错的软件。...流程绘制软件 01 | SmartDraw 11 这是采用完全不同方法的快速绘图软件,可让你创造出流程、组织、树形、网路格、地图和其他类型。后台回复“14”,获取永久使用链接。

    2.6K21

    Netty网络编程第八卷

    根据配置和可用核心的 同,可能会创建多个EventLoop 实例用以优化资源的使用,并且单 个EventLoop 可能会被指派用于服务多个Channel 。...,没有必须要实现的方法,当然我们也会使用SimpleChannelInboundHandler,这个类我们上个小节也稍微讲了它的优缺点,这里赘述 ChannelHandler,ChannelHandlerContext...ChannelHandlerContext的实例的话,你可以获取到你想要的一切,你可以根据ChannelHandlerContext执行ChannelHandler中的方法,我们举个例子来说,我们可以看下...,然后执行其内部维护的ChannelHandler的channelActive方法 上面以active事件为切入点进行了调用链分析,其他事件类似,大家可以参考 分析了那么多,下面讲讲pipeline...服务端的两个EventLoopGroup工作流程如下 总结: 在编写服务端的时候需要使用ServerBootStrap来绑定端口和配置一些其他信息,编写客户端是需要使用BootStrap指明发送链接的目的地和其他配置

    41810

    BootStrap

    Bootstrap出现之前:   命名:重复、复杂、无意义(想个名字费劲)   样式:重复、冗余、规范、不和谐   页面:错乱、规范、不和谐   在使用Bootstrap之后: 各种命名都统一并且规范化...├── bootstrap.css.map │ ├── bootstrap.min.css // 核心CSS样式压缩文件,其他的文件都是在这个核心文件的基础上加了一些其他的样式 │ └── bootstrap.min.css.map...引入:     将下载解压的那个文件夹放到我们的项目目录下就能使用了       可以把主题那些你用不到的css等文件删除。     ...然后引入一下就能用了,很简单 Bootstrap全局样式   排版、按钮、表格、表单、图片等我们常用的HTML元素,Bootstrap中都提供了全局样式。   ...JavaScript插件 常用的Bootstrap自带插件 其他常用插件 Bootstrap实例精选: 封面 Carousel 博客页面 控制台 登录页 Offcanvas 补充一些内容:   pycharm

    5.5K30

    一文讲透 Tomcat 的类加载机制!揭秘类加载核心

    典型的应用场景就是,Java使用该类加载 器加载JVM默认提供的但是不属于核心类库的Jar。...(推荐使用)指定目录下的或者-classpath运行 参数指定的Jar包。...:既然Web应用之间的类加载器相互独立,那么我们就能只针对一个Web应用进行 重新部署,此时该Web应用的类加载器将会重新创建,而且不会影响其他Web应用。...lib有没有,然后回退给ExtClassLoader对扩展包下的数据进行加载; 如果未加载到,则从 /WEB-INF/classes加载; 如果未加载到,则从 /WEB-INF/lib/*.jar...总结:tomcat打破了双亲委派的原则,实际是在应用类加载器中打破了双亲委派,其他类加载器还是遵循双亲委派的。

    1.7K20

    前端|Bootstrap 实例 - 简单的轮播插件

    1.Bootstrap轮播(Carousel)插件 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。...除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。要使用Bootstrap,需要先引入Bootstrap的相关文件。 ?...1.1 引入Bootstrap的相关文件 2.轮播图三要素:小圆圈、图片、左右按钮 ?...1.2 轮播代码 3.轮播组件注解 (1)data-ride=”carousel”:触发轮播动作,实现自动播放,用于标记轮播在页面加载时就开始动画播放 (2)data-intarval=”1000...(12)aria-hidden="true" 图标的可访问性,避免混淆的输出内容,图标没必要被类似屏幕阅读器的设备访问,hidden就是对其隐藏 (13)class="sr-only"主要用于增强可访问性

    3.9K20

    使用Nodejs获取自己所有的CSDN博客附源码与效果

    做数据统计,报表,必须要先有数据,于是写了一个使用Nodejs获取自己CSDN所有博客链接的程序, 并将这些博客数据通过页面展示出来。...如果你的软件是一个人做,而你有没有太多时间,那么首先你要列出一个最小的功能集,这个功能集是这个软件的核心功能,实现了它就能让人快速了解你的产品有什么特点。...后端获取后,将数据格式化,并返回前端,前端使用数据,展示到用户页面上。软件的第一此迭代需求做到这一步就行了。文章的阅读数,点赞数,收藏数,文章的具体内容,这些暂时不做。 那么这个需求的难题在哪里那?...这样就能获取所有的文章了。 需要考虑的问题是,每次发送请求最好有一个时间间隔,另外就是循环调用异步函数后的回调函数的处理.所幸这些问题都能使用async得到解决。...-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> Blog Tool <link href=".

    61610

    jvm类加载机制,双亲委派机制,看这一篇就够了

    Java代码执行流程 大家通过这个流程,了解一下我们写好的Java代码是如何执行的,其中要经历类加载器这个流程,我们就来仔细讲讲这里面的知识点。...使用是指我们new对象进行使用,卸载指对象被垃圾回收掉了。 类加载的过程 [add6bbb0-e2c6-4158-8843-c8c7868b527f.png?...直接引用就是直接指向目标的指针、相对偏移量或一个间接定位到目标的句柄。 解析动作主要针对类、接口、字段、类方法、接口方法方法类型等。...从可知rt.jar核心包是有Bootstrap类加载器加载的,其内包含SPI核心接口类,由于SPI中的类经常需要调用外部实现类的方法,而jdbc.jar包含外部实现类(jdbc.jar存在于classpath...路径)无法通过Bootstrap类加载器加载,因此只能委派线程上下文类加载器把jdbc.jar中的实现类加载到内存以便SPI相关类使用

    41830

    【Java 进阶篇】深入了解 Bootstrap 按钮和图标

    在本文中,我们将深入探讨 Bootstrap 中按钮和图标的使用,适合初学者,帮助他们更好地理解和应用这些元素。 什么是 Bootstrap 按钮?...按钮是网页上的交互元素,通常用于触发某种操作或链接到其他页面。Bootstrap 提供了一系列按钮样式,使按钮看起来更漂亮、一致且易于使用。这些按钮样式包括不同的颜色、尺寸和状态。...Bootstrap标的基本结构 使用 Bootstrap 图标非常简单,只需在 HTML 中添加一个图标元素即可。...这种结合使用图标和按钮的方法可以增强用户界面的吸引力和交互性。 自定义图标 尽管 Bootstrap 提供了丰富的图标库,但有时您可能需要使用自定义图标。...您可以通过导入其他图标库或使用自己的图标来实现这一目标。

    23630
    领券