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

  • chrome css 动画上的抖动

    尝试使用两个具有相同背景图像 svg 的居中 div 制作一个从中心淡入图像的 css 动画 并为其宽度和背景位置设置动画 问题是 在 chrome 上 存在严重的抖动问题 也许是 chrome 循环执行动画步骤 而不是同时执行它们 这是j
  • 如何让左浮动和右浮动在同一条线上?

    问题 The left part nav ul li which float left and the right part nav search which float right are not in a line it should
  • 滚动效果:先慢后快

    我正在尝试创建滚动效果 当onclick事件被触发 我想要那个div1滚动到dev2 一开始应该慢 然后快 这是一个使用此效果的网站 http community saucony com kinvara3 http community sa
  • FF 和 Webkit 中边框折叠的差异

    我有一个包含以下规则的表 table cellspacing 0 cellpadding 0 style width 100 并且单元格具有以下 CSS td padding 4px height 22px border 1px solid
  • 如何将 OTF/TTF 文件转换为 EOT 格式?

    我需要使用 font face 功能 并且我的字体是 OTF TTF 格式 而 Microsoft 浏览器仅支持 EOT 格式 我尝试使用微软工具WEFT 但它不起作用或者我不明白它是如何工作的 还有其他方法可以将我的字体转换为 EOT 格
  • 与 body 相比,将 css 规则应用于 html 有什么区别?

    我看不出以下之间的区别 html background f1f1f1 and body background f1f1f1 有什么解释吗 没有真正的区别 如果你只是谈论在哪里申请background 否则BoltClock 对另一个问题的回
  • HTML 嵌入对象具有灰色背景。可以透明吗?

    我使用带有开源插件的 Firefox 来播放视频 视频被 尽可能好地 缩放以适应嵌入对象的宽度和高度中定义的可用空间 但有时右侧和 或底部会有一点灰色边框 看来这不是我的父 div 的背景颜色 因为更改它根本没有效果 这是 HTML div
  • Angular4 - 滚动到锚点

    我正在尝试对同一页面上的锚元素进行简单的滚动 基本上 用户点击 尝试 按钮 它就会滚动到页面下方 ID 为 登录 的区域 现在 它正在与一个基本的id login a href login a 但它正在跳转到该部分 理想情况下 我希望它滚动
  • 使用 GD lib 过滤器标准化 CSS 过滤器

    我想让用户拖动范围滑块并通过实时预览 CSS 滤镜 调整图像的亮度和对比度 然后使用 GD 库保存调整 但是 我似乎无法从 CSS 过滤器和 GD lib 亮度和对比度过滤器获得相同的结果 我的 CSS 过滤器范围为 50 150 其中 1
  • CSS Font-Face url 不起作用?

    我在使用 font face 选择器时遇到了一些问题 我有以下问题 font face font family MuseoSans 700 src url http mysite co uk clients reload Images st
  • 如何将模糊屏幕设置为整页并在点击页面时转到顶部

    CSS1 有效 parentDisable z index 2000 width 100 height 100 display none position absolute left 0 background url images btra
  • 使 css nth-child() 只影响可见

    有没有办法用这个CSS只影响可见元素 table grid tr alt nth child odd background ebeff4 table grid tr alt nth child even background ffffff
  • 带有右侧固定侧边栏的 Bootstrap 响应式网格

    我想创建一个带有类似引导程序的模板 它尊重网格的响应系统 在图中 导航栏和右侧 包含两个按钮 是粘性的 始终显示在视图上 我的问题是右侧 因为在引导网格系统中 右侧块将被视为单行 而主要内容包含多行 我怎样才能做到这一点 围绕整个 Boot
  • 如何用纯JavaScript控制变换距离

    我做的http codepen io adamchenwei pen dOvJNX http codepen io adamchenwei pen dOvJNX 我尝试对 dom 应用某种移动方式 使其移动固定距离并停止 而不是动画并移动穿
  • 如何使用 jQuery 在按下按钮后保持按钮处于活动状态

    我见过一些非常相似的问题 但一直无法找到我正在寻找的答案 我已经确定了解决方法 但想知道执行该任务的正确方法 我想要的是单击按钮并使活动状态保持不变 下一次单击将切换状态 这是所需的 我真正需要知道的是如何解决 uiButton activ
  • IE10中的图像插值

    这是我的用例 我有一个采用响应式设计的网页 该页面垂直分成两半 我想在右侧显示图像 呈现为 PNG 或 JPG 的 PDF 页面 调整窗口大小后 图像的大小应立即更改 我以为我已经解决了这个问题 我将服务器上的图像渲染得足够大 以适应最大可
  • Mobile Safari (iPhone) CSS 垂直居中/行高 CSS 问题

    有一个问题 我一直试图在各个项目中解决 但运气不佳 我有一些divs 内的文本以 CSS 为中心 使用display block and line height 我也尝试过padding和固定的高度 通常 这些设置要么只是标题 要么有时是按
  • 在 R Shiny 中,如何使用可排序 js 将其在列表中出现的顺序次数附加到每个列表元素?

    下面的可重现代码适用于将元素从一个面板拖动到另一个面板 并在 拖动到 面板中自动使用 HTML CSS 对拖入的每个元素进行排名顺序编号 但是 我现在尝试附加到每个 拖动到 列表元素的末尾 使用某种形式的paste0 我假设 该元素在 拖至
  • 响应式2列2行布局

    我一直在试图弄清楚如何创建这个布局 我有一个 2 列布局 左列有 1 行 右侧有 2 行 我试图让它流畅地调整 我遇到的问题是 我希望右侧顶部图像的顶部与左侧图像的顶部对齐 而底部图像的底部与左侧图像的底部保持对齐 我应该使用桌子吗 这是我
  • 将下拉按钮和下拉菜单放在中心?

    div class dropup center block div

随机推荐

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