如何将文本放置在 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 图标上? 的相关文章

  • 适用于移动设备的响应式订单确认电子邮件?

    我从未见过令人惊叹的订单确认 发票电子邮件 即使是最好的 html5 网站也会发送糟糕的订单确认电子邮件 有时是纯文本 我相信这是因为发票通常需要使用表格来显示购买的物品 这在移动设备上实现起来非常困难 我发现了一些让手机上的表格更易于管理
  • 将特定字形与网络字体一起使用

    使用网络字体 我想使用字体功能设置 CSS 中的选项以及跨度类HTML 中 以便使用字体集中的特定替代字形 我需要以正确的语法使用哪些值 GID Unicode 才能定位特定的目标glyph内glyph备择方案 这些功能使用 OpenTyp
  • 我可以使用 ASP.NET WebForms 母版页在每个内容页中包含不同的 javascript/css 文件吗?

    我有几个使用相同母版页的内容页 它们并不都需要包含在相同的 javascript 和 css 文件中 tag 是否可以更改内容来自内容页面的标签 确实如此 但我建议采取一些不同的做法 我在关闭正文标签的正上方放置了一个内容占位符 然后我填充
  • 如何垂直对齐div内的图像

    如何在包含的内容中对齐图像div Example 在我的示例中 我需要将 img in the div with class frame div class frame style height 25px img src http jsfi
  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是
  • 使用纯 CSS 创建向上和向下箭头图标或按钮

    我正在尝试使用纯 CSS 且无背景图像创建如下所示的 向上和向下 控制按钮 但是当我在 中添加箭头的CSS时li className after or li className before 主盒子的位置移动了 这是我遇到的问题的小提琴 g
  • chrome 中选择选项元素的额外填充

    我有一个选择元素 用户可以在其中选择分类和描述 仅在 Chrome 浏览器中 我有一个额外的填充 无法使用 padding 0 或其他 css 标签删除它 Chrome 的屏幕 https i stack imgur com m3iIb p
  • CSS使背景图像使用字体字符

    我想使用字体字符 例如来自 font awesome 作为输入元素的背景图像
  • 如何在bootstrap中默认隐藏侧边栏?

    我在这里有一个很好的参考 作为 Bootstrap 在设计 Web 表单应用程序时的侧边栏 http startbootstrap com template overviews simple sidebar http startbootst
  • 如何将大于整个页面 100% 的元素居中对齐?

    我有一个宽度为 100 的 div 并且隐藏了一个宽度为 3000px 的 div 我希望3000px的div左右均匀地被切断 我会使用背景位置 中心 然而 事情比这更复杂 3000px div 包含 30 100px div 我尝试过在
  • CSS - div 与父 div 底部对齐(内联块)

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让
  • 如何在jqplot中显示饼图之外的标签?

    Jqplot 有如下图表 jqplot 图表 http www jqplot com tests pie donut charts php 我的问题是如何在 a 之外显示标签jqplot chart像下面这样high chart 高图表可以
  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px
  • 动态表单标签宽度的 CSS

    我目前正在重构我们的表单控制器之一 以便我们可以将其用于面向公众的网站 目前它正在为表单生成表格布局 但我正在尝试使用 CSS 表单来完成它 我正在尝试重现看起来像这样的东西http www stylephreak com uploads
  • Textmate“注释”命令对于 css 代码无法正常工作

    当我在 TextMate 中切换 CSS 源代码的注释时遇到一些问题 Using the shortcut CMD I activate the Comment Line Selection command from the source
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • 如何在背景剪辑中包含文本装饰:文本;影响?

    我在用 webkit background clip text border and color transparent在锚标记上 下划线似乎永远不可见 我想要的是将文本装饰包含在背景剪辑中 这是我的CSS background clip
  • 覆盖并重置 CSS 样式:auto 或 none 不起作用

    我想覆盖为所有表定义的以下 CSS 样式 table font size 12px width 100 min width 400px display inline table 我有一个特定的表 其类名为 other 最后的餐桌装饰应该是这
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di

随机推荐

  • 提高我的脚本性能 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 的范围中添加底部边距和底部填充 但都没有成功 有没有一种简单的方法可以完成我想要完成的任务