使用带有 Font Awesome 的数字

2024-01-09

我想使用数字列出流程中的步骤。我很好奇如何使用 Font Awesome 来做到这一点。

我想使用带有 1、2、3... 的圆圈。这可能吗?
Font Awesome 会在图标列表中添加数字吗?

Thanks!


字体真棒实际上有内置支持 https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons用于将常规文本(即数字、字母……)堆叠在图标之上。

这里有一个日历图标的好例子 http://blog.fontawesome.io/2014/05/19/stacking-text-and-icons/以纯文本形式显示该月的实际日期。正如该帖子还解释的那样,您可能需要添加一些额外的样式才能实现最佳定位。

HTML:

<span class="fa-stack fa-3x">
  <i class="fa fa-calendar-o fa-stack-2x"></i>
  <strong class="fa-stack-1x calendar-text">27</strong>
</span>

CSS:

.calendar-text { margin-top: .3em; }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用带有 Font Awesome 的数字 的相关文章

  • html 和 body 元素的高度

    我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作 我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些
  • 如何使用 javascript 或 jquery 生成 CSS 路径?

    关于如何生成元素的 CSS 路径有什么建议吗 CSS 路径是识别特定元素所需的 css 选择器的路径 例如 如果我的 html 是 div div class bar ul li 1 li li 2 li li span class sel
  • Google Maps API 下拉列表,缩放至标记

    我正在使用 Google Maps API v3 我有一个带有一些标记的简单地图 我还有一个下拉列表 我需要最少的代码来完成这项工作 我想在下拉列表中选择一个标记 并将选定的标记平移到它 我已经尝试了一切并在网上查看 我发现事情很接近 但到
  • 如何动态打破 FlexBox 列以开始新列

    I have a dynamic list of items containing text placed column wise which I need to break after every 5th item 我只有两个限制 每个
  • 每 3 秒重复一次动画

    我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for
  • 删除数据表列中的额外填充

    你好 我创建了 JQuery DataTables 如下所示 所以我的问题是如何删除 图片 列中过多的填充 这就是我初始化表的方式 violators tbl DataTable aoColumnDefs bSortable false a
  • 物化模式覆盖整个页面(模式弹出窗口未带到前台)

    由于保密原因 我无法上传 Web UI 的屏幕截图 物化模态应该表现得像here http materializecss com modals html 但不幸的是 我的网站发生的情况是 包括模式在内的整个页面都是 深色背景 的一部分 模式
  • 如何指定网站的语言? (HTML?)

    如何指定页面采用某种语言以便搜索引擎可以理解 这是我放在顶部的元标记吗 如果是 您知道大多数搜索引擎是否使用它来确定语言吗 我已将一页英文内容转换为几种不同的语言 并希望将该信息包含在 html 中 让搜索引擎知道他们正在处理哪种语言 快速
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • 如何设置菜单按钮和菜单项的样式

    我尝试更改菜单按钮中的样式 我可以更改菜单按钮样式 但不能更改其菜单项 无论我尝试什么 菜单按钮内的菜单项都保持不变 menu button fx background color black menu button label fx ba
  • 保持未知数量的 div 居中,每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第
  • jquery从变量中删除html元素

    我将 html 保存在变量中 var itinerary events today html 我有很多 html 和一个按钮我想删除 它的 ID 为 myButton 如何从变量中保存的 html 中删除它 我建议这种方法 var itin
  • HTML 中部分着色的阿拉伯语单词

    我不会说阿拉伯语 但我需要我们网站上对阿拉伯语的具体支持 我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同 当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出
  • Iframe 相对路径挑战

    我有一个页面 在页面内有一个 Iframe 目录如下 Folder1 Folder2 IframeCSS IframeCSS Css iframePage1 html stuff css parentPage1 html 在 iframeP
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • 如何在没有@import的情况下减少@import?

    我用的较少 从 Google PageSpeed 我了解到 使用 importCSS 文件中的内容会影响网站速度 所以我想排除任何 import来自我的 CSS 的东西 我有 2 个不同的样式表reset css and rebuild c
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 如何在 AngularJS 循环内使用标签

    所以我在里面ng repeat像这样 li li

随机推荐

  • 如何读取.net core api项目中appsetting.json文件中的多个连接字符串

    我有多个连接字符串属性 例如 在 AppSetting json 文件中 connectionstring connection1 datasource1 connection2 datasource2 我想读取控制器或服务文件中的连接字符
  • Phalcon Multi module - 动态模块注册

    大家好 我在 Phalcon 的多模块项目中使用以下结构 modules module1 controllers models views module2 controllers models views module n controll
  • 无法使用 Nuitka 编译 Python

    我正在尝试编译使用 urllib request BeautifulSoup 和 网页浏览器 nuitka python py Nuitka WARNING python py 16 Cannot find urllib request a
  • 使用 Add-on SDK 的 Firefox 插件提供更多存储空间

    我想使用插件生成器开发一个插件 我读到 通过简单的存储 一个人的插件可以有大约 5 MB 的空间 但 5 mgb 的空间不足以容纳我的应用程序 我需要更多 我能做什么 考虑到附加 SDK API 您无法做太多事情 相反 你可以冲出沙箱 ht
  • 什么时候应该在 OCaml 中使用对象?

    通常 OCaml 程序可以使用或不使用对象来编写 什么时候使用物品最有利 什么时候应该避免使用物品 作为一般经验法则 不要使用对象 它们带来的额外复杂性通常并不值得 我认为这也是适用于其他语言的规则 但那是另一回事了 至少对于 OCaml
  • 显示本地时间的 MySQL 时间戳

    我有一个 MySQL 数据库 其中存储的大量数据均采用 UTC 时间的时间戳 当用户查询该数据库时 我希望他们能够在本地时区查看数据 我不想每次都计算偏移量并使用 PHP 代码更改时间戳 还有其他办法吗 您可以使用localtime htt
  • android ellipsize 多行textview

    我需要省略多行文本视图 我的组件足够大 可以用椭圆显示至少 4 条线 但只显示 2 条线 我尝试更改组件的最小和最大行数 但它没有任何改变 这是问题的解决方案 它是 TextView 的子类 实际上适用于椭圆化 我发现之前的答案中列出的 a
  • 使用 Cassandra 和 CQL3,如何在单个请求中插入整个宽行?

    我想将包含 50 000 列的单行插入到 Cassandra 1 2 8 中 在插入之前 我已准备好整行的所有数据 在内存中 0 1 2 49999 row id text text text text 列名是整数 允许切片进行分页 列值是
  • 全屏 Python TKinter 或 wxPython 窗口,但“停留在所有窗口的底部”?

    我想创建一个全屏面板 在视觉上阻止对屏幕上所有内容的访问 Ubuntu 11 10 中的桌面 菜单 Unity 面板等 但位于其他应用程序打开的窗口下方 这主要是为了让笔记本电脑具有儿童防护功能 我希望孩子 4 岁 能够访问一些选定的应用程
  • 如何在 Docker Postgres 脚本中创建用户/数据库

    我一直在尝试通过创建自定义用户和数据库来为开发 postgres 实例设置容器 我正在使用官方 postgres docker 镜像 https registry hub docker com postgres 在文档中 它指示您将 bas
  • Passenger 是否/可以使用 Mongrel 等集群?

    我只是好奇 Passenger 是否能够像 Mongrel 那样利用集群 如果是这样 我该如何专门运行带有集群的 Passenger 我正在使用 nginx 如果不是 它为何比 Mongrel 表现得那么好 Mongrel Cluster
  • 如何仅在存在定义的前缀的情况下将 CapitalCaseWords 替换为空格大写?

    参考信息 Notepad 正则表达式用空格大写替换大写字母 https stackoverflow com questions 64602444 notepad regex to replace capitalised case words
  • SimpleDateFormat 解析需要一小时(夏季使用 RFC 1123,GMT)

    我使用 SimpleDateFormat 和 RFC 1123 来格式化日期并解析日期 但是 parse format date 有时与原始日期相差一小时 代码如下 public static void main String args t
  • 获取数组中的所有组合

    假设我有以下数组 var arr new A B C 我怎样才能产生仅包含两个字符且没有两个相同字符的所有可能组合 例如AB会是一样的BA 例如 使用上面的数组将产生 AB AC BC 请注意 该示例已被简化 所需的数组和字符串的长度会更大
  • 锁定/解锁设备时相机示例错误

    我正在使用相机 并且使用文档中给出的完全相同的示例 http developer android com resources samples ApiDemos src com example android apis graphics Ca
  • 转换播放!从 MySQL 到 PostgreSQL 的框架演变

    我正在使用 plaframework 2 2 1 我做了一个项目 MySQL 但现在我想将我的项目转移到 PostgreSQL 但在重新创建数据库演变时遇到了一些错误 我的 mysql 的旧演变 1 sql 运行良好是 Created by
  • 如何设置绑定到Textbox的Label的可见性?

    我有三个绑定到标签的文本框 当我在文本框中键入内容时 文本框文本值将设置为标签 问题是我想在文本框为空白时将标签的可见性设置为折叠 反之亦然 如何在 WPF 中使用 Visibility Convert 来做到这一点 在 XAML 文件中
  • Angular2 使用 @Inputs 和 s

    我的页面中有一个子导航 它在公共主视图下方显示一些子视图 我想通过将一个对象传递给子视图
  • 查找两个列表中都不存在的对象的最佳方法

    我正在开发一个模块 该模块依赖于检查两个列表中是否存在不存在的任何对象 该实现应该是用Python 实现的 考虑简化的对象 def class Foo object def init self attr one None attr two
  • 使用带有 Font Awesome 的数字

    我想使用数字列出流程中的步骤 我很好奇如何使用 Font Awesome 来做到这一点 我想使用带有 1 2 3 的圆圈 这可能吗 Font Awesome 会在图标列表中添加数字吗 Thanks 字体真棒实际上有内置支持 https fo