如何将文本放置在 Font Awesome 图标上?

2024-04-29

有没有办法垂直对齐堆叠在 Font Awesome 图标顶部的文本?我想将这个堆栈中的#1 向上移动,以便它位于奖杯图标的杯子中央。我尝试在封装 #1 的范围中添加底部边距和底部填充,但都没有成功。有没有一种简单的方法可以完成我想要完成的任务,或者我需要走另一条路?

<span class="fa-stack fa-3x">
  <i class="fa fa-trophy fa-stack-2x"></i>
  <span class="fa fa-stack-1x" style="color:red;">
    <span style="font-size:35px;">
      #1
    </span>
  </span>
</span> 

http://jsfiddle.net/wc2jP/ http://jsfiddle.net/wc2jP/


Add display:block; margin-top:-20px;到#1<span>像这样标记:

http://jsfiddle.net/wc2jP/1/ http://jsfiddle.net/wc2jP/1/

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

如何将文本放置在 Font Awesome 图标上? 的相关文章

  • 删除特定数据表上的所有边框

    我需要使用 PrimeFaces 隐藏一个数据表的所有边框 而不是全部 我尝试了很多事情 但没有人奏效 有谁知道该怎么做 我已将以下样式 单独 应用于ui datatable class border hidden important bo
  • 单击导航项锚链接时如何关闭切换菜单

    请看我的FIDDLE http jsfiddle net ayhpp8ax 我有一个带有 响应式 导航菜单 带有指向页面上元素的锚链接 的 1 页网站 当浏览器视口小于特定宽度 在我的情况下为 767px 时 使用此 javascript
  • html 电子邮件内的背景图像 css - Gmail 不支持

    我想向我的用户发送如下所示的带有背景图像 css 的 html 正文电子邮件 div style width 500px height 1000px background color black background image none
  • div 中的中心文本?

    我有一个div 30px高和500px宽的 这div可以包含两行文本 一行在一行 并相应地设置样式 填充 但有时它只包含一行 我希望它居中 这可能吗 要水平居中 请使用text align center 要垂直居中 只能使用vertical
  • 浮动图像周围具有最小列宽的流动文本

    我想要一种方法来防止流动文本列变得太窄 例如 在一列 HTML 文本中 有一个图像浮动到左侧 正如预期的那样 文本沿着图像周围的列的右侧向下流动 但是 如果图像几乎与列一样宽 则文本最终会非常窄 在这种情况下 我希望文本简单地not流过图像
  • CSS 继承、别名和其他很酷的东西

    有一天 我随机浏览网页 发现了一些程序 可以让你编写 CSS 别名和其他很酷的东西 我现在不记得了 举个例子 我记得你可以这样做 myclass background color red greenfont 其中 greenfont 在其他
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • -webkit-box-shadow 与 QtWebKit 模糊?

    当时有什么方法可以实现 webkit box shadow 的工作模糊吗 看完这篇评论错误报告 https bugs webkit org show bug cgi id 23291 我认识到这仍然是一个问题 尽管错误报告被标记为RESOL
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • SVG 动画不适用于 Chrome 中的 favicon

    In the SVG 图标已设置 这是旋转内圆的SVG文件的内容 Favicon 动画在 Chrome 中根本不起作用 如何让它在 Chrome 中工作 在 Firefox 中可以正常工作 在 Edge 中则不行 但 Chrome 是最重要
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • 如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置

    有一天我偶然发现一个例子 https codepen io itslit pen gvKrMY它使用 Vue js 但我的问题更多是关于 Vue 用于实现状态之间转换的 CSS 和 HTML 卡片暂时获得等级 shuffleMedium m
  • 如何隐藏div元素中太长的文本?

    如何隐藏 div 中的溢出 如果文本比 div 长 则文本将换行到新行 div style width 50px border 1px solid black test test test test div 也许是 CSS 属性text o
  • 为什么 IE8 在我的图像锚标记上添加底部边框?

    我知道 这很可悲 但今天早上 IT 刚刚在我的机器上安装了 IE8 我立刻遇到了一个明显的问题 尽管我知道答案就在我面前 但我已经把它搞砸了太久了 首先 这是网站 www mchenry edu http www mchenry edu 在
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • 网站的主体和元素固定在 980px 宽度上,不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad

随机推荐

  • 提高我的脚本性能 Google Sheets 脚本

    我创建了一个函数 每当我运行 AppendRow 脚本时 AY 列中没有点 的每一行 包含我想要的每个信息 列的数组从该表将被转移到我的主表 其中有13k rows atm 通常 每天大约有 20 40 行被粘贴到第一个工作表中 此脚本会自
  • mcdropdown 的替代方案

    我正在构建一个自动完成下拉列表 用户可以从多个级别的类别中进行选择 在该网站的先前版本中 我们使用http www givainc com labs mcdropdown jquery plugin htm http www givainc
  • 如何减少 Ionic Cordova 项目启动持续时间?

    我做了一个离子科尔多瓦项目 但发布到Android手机后 根据手机类型 我们的程序持续时间约为 10 20 秒 当我搜索这个问题时 人们说这是因为 启动画面持续时间 离子启动画面未加载 https stackoverflow com que
  • 如何使用p:ajax按顺序更新多个组件

    我正在尝试呈现以下 JSF 页面
  • HoloEverywhere 的正确使用方法是什么

    我正在尝试使用开发分支HoloEverywhere 库添加到我的应用程序中 我知道这仍处于开发阶段 但演示似乎工作正常 所以我尝试一下 I put android theme style Holo Theme Sherlock Light
  • Java Thread.sleep 最短时间[重复]

    这个问题在这里已经有答案了 The TimeUnit sleep 长超时 http docs oracle com javase 8 docs api java util concurrent TimeUnit html sleep lon
  • 简化 Django 中的表单提交

    我在 Django 中有一个表单 用户可以在其中以单个表单提交文件 图像 文本 如下所示
  • git Cherry-pick 和 git show 有什么区别?补丁-p1?

    我遇到了一种情况git cherry pick X会产生一些冲突 但也会创建额外的插入 当使用git diff 然后我重新跑了git show X gt my patch 然后做了patch p1 lt my patch在我的树上 我得到了
  • 如何使用 QWebElement 设置 input(type="file") 的值?

    我正在尝试将照片上传到vk com https vk com using QtWebKit https qt project org doc qt 4 8 qtwebkit html模块 我面临的问题是无法正确填写input type fi
  • 在 SQL Server 中以编程方式创建数据库

    如何以编程方式创建数据库以及执行此操作所需的最少信息是什么 Please没有 SQL Server 管理对象 API 建议 您可以使用SQL Server 管理对象 API http msdn microsoft com en us lib
  • jQuery UI:DatePicker,仅选择今天到过去的日期

    我在 jQuery UI 核心中使用 datePicker 我需要一个只能选择从过去一直到今天的日期的日期选择器 是否有捷径可寻 请注意 我使用的是 UI 核心 而不是 DatePicker 插件 我的 jQuery 调用 function
  • Java线程的等待和通知方法

    我正在学习 OCJP 现在我在 线程 章节 我有一些关于等待和通知方法的问题 我想我明白这里发生了什么 但我只是想确保我走在正确的道路上 我编写了这段代码作为示例 package threads public class Main stat
  • SQL Server 2008:在没有任何锁的情况下出现死锁

    我目前正在 SQL Server 2008 数据库上进行一些实验 更具体地说 我有一个 JDBC 应用程序 它使用数百个并发线程来执行数千个任务 每个任务都在数据库上运行以下查询 UPDATE from Table A where rowI
  • MVC3 BeginForm 不渲染
    标签

    我的视图存在问题 未呈现开始和结束 FORM 标签 下面是我的控制器的代码 HttpGet Authorize public ActionResult Edit long id Position position positionRepos
  • C++中while(x--)是什么意思

    我刚刚开始竞争性编程 并一直使用如下循环来定义大多数练习问题中的测试用例数量 for int i 1 i lt t i 然而 我见过人们使用 while 循环 它只有条件 t 运行起来也完全没问题 有人可以向我解释这种情况实际上是如何运作的
  • 无法解析 Android 资源字符串

    我正在学习 Android 我遇到了一个我认为很奇怪的问题 在 res values strings xml 我有
  • mariadb: jdbc: setTimestamp 截断毫秒

    在我看来 如果我使用准备好的语句将它们插入到我的 mariadb 中 毫秒就会被截断 谷歌搜索并不成功 我发现了很多类似的问题 这些问题要么已解决 要么不适用 但很难相信我是唯一一个遇到这个问题的人 所以我想在向 mariadb 提交错误之
  • 分析 Cortex-M7 (stm32f7) 上的 memcpy 性能

    简洁版本 从 GNU ARM 工具链中提取的 memcpy 的性能指标在 ARM Cortex M7 上对于不同的副本大小似乎差异很大 即使复制数据的代码始终保持不变 这可能是什么原因造成的 长版 我是使用 GNU Arm 工具链 11 2
  • 重写 openshift maven 脚本 (jenkins gear)

    我在 Openshift 上有 Jenkins 实例 我已启用 Jenkins 构建我的 Openshift 应用程序 这里是 Jenkins shell 脚本的一部分并记录它们生成的内容 Sync any libraries rsync
  • 如何将文本放置在 Font Awesome 图标上?

    有没有办法垂直对齐堆叠在 Font Awesome 图标顶部的文本 我想将这个堆栈中的 1 向上移动 以便它位于奖杯图标的杯子中央 我尝试在封装 1 的范围中添加底部边距和底部填充 但都没有成功 有没有一种简单的方法可以完成我想要完成的任务