程序员经验分享-hwhale

通过 FontAwesome 进行星级评定的 CSS

2024-02-05

我已经通过不同的方法尝试了 CSS 星级评定的一些变体，并且尝试通过 FontAwesome 而不是使用精灵来实现以下内容。我希望能够理想地包含半星，但这就是下面的示例失败的地方。这是我到目前为止所尝试过的。我无法让半/部分星在这里正常工作。任何指点都非常感谢！

.score {
  display: block;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}

.score-wrap {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 19px;
}

.score .stars-active {
  color: #EEBD01;
  position: relative;
  z-index: 10;
  display: inline-block;
}

.score .stars-inactive {
  color: grey;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-stroke: initial;
  overflow: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:88%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:50%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:100%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:0%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

溢出：隐藏需要位于“stars-active”（大小元素）而不是“score-wrap”（永远不会溢出）。您可以使用white-space: nowrap以防止星星换行到隐藏溢出容器内的下一行。

.score {
  display: block;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}

.score-wrap {
  display: inline-block;
  position: relative;
  height: 19px;
}

.score .stars-active {
  color: #EEBD01;
  position: relative;
  z-index: 10;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.score .stars-inactive {
  color: grey;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-stroke: initial;
  /* overflow: hidden; */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:88%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:50%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:100%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>

<span class="score">
    <div class="score-wrap">
        <span class="stars-active" style="width:0%">
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
<span class="stars-inactive">
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
            <i class="fa fa-star-o" aria-hidden="true"></i>
        </span>
</div>
</span>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

fontawesome

通过 FontAwesome 进行星级评定的 CSS 的相关文章

  • HTML 和 CSS 的基本编码标准 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想知道它们是否是像 PSR 01 这样的 HTML 和 CSS 基本编码标准 我尝试谷歌搜索和搜索 但没有找到 我建议看看类似的东西

  • 如何更改/自定义 Google 地图上街景小人的图标？

    我已经搜索了 stackexchange 但我只找到了更改街景小人位置的问题 答案 有没有办法改变它的源图像 我尝试过像这样影响风格 map canvas gt div gt div nth child 8 gt div nth child

  • 更少的编译错误

    我正在使用 Incident57 的 CodeKit 预处理器来编译一系列 less 文件 这些文件将被导入并缩小为一个名为 template css 的 CSS 文件 然而 在进行一些编辑后 我不知道是什么编辑导致了这个 我开始得到non

  • 为什么连字符不能与内部 一起使用？

    我正在尝试让连字符处理具有以下内容的文本 span 里面的元素用于突出显示 这似乎打破了连字符算法 有什么方法可以修复这种行为 使连字符的放置方式与没有连字符的位置相同 span 元素 我不是在问像这样的解决方法 shy 代码 沙箱 htt

  • Safari 6 (iOS 6) 弹性布局不会换行元素

    我需要将两个框放在列中 这在我测试过的其他浏览器中有效 但在 iOS 6 上的 Safari 6 中无效 例子 http jsfiddle net 5FESj 1 http jsfiddle net 5FESj 1 display webk

  • 向下滚动时如何使图像移动？

    这是我想要实现的目标的示例 https www flambette com en https www flambette com en 我尝试过更改图像的 css 属性 但效果不能满足我的需求 我尝试过以下代码 mydocument on

  • HTML 文件上传“未选择文件”文本样式

    我正在构建一个需要文件上传的 html 表单 当我让文件上传部分正常工作时 我无法获得表单上传按钮和 未选择文件 文本的样式 我想要的标记是 有办法做到吗 PS 请忽略绿色文本 上传屏幕截图 我有那个工作 当前行为按钮和 未选择文件 位于同

  • 为什么响应式图像需要“高度：自动”？

    是否有必要定义height auto现在 原因是什么 img max width 100 height auto Thanks 在没有明确设置高度尺寸的图像上 它实际上默认为自动高度 所以如果你设置max width 100 高度将由浏览器

  • 用于选择 querySelector 中当前元素的 CSS 伪选择器可用于同级 (+) 或一般同级 (~) 选择器？ [复制]

    这个问题在这里已经有答案了 如果我有这个 HTML div class elem div class child div div div class sibling div 和JS let elem document querySelect

  • 使用边距与填充？ [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我最近开始自己在线学习周三开发 并且是这个领域的新手 所以对我的基本查询表示歉意 我知道边距和填充之间的区别 用逻辑术语 但不太确定 何时应该使

  • 自动调整元素 (div) 大小以适合水平内容

    我尝试谷歌搜索 但没有得到太多结果 我正在构建一个水平轮播 它在浮动的 LI 中显示图像 我想解决的问题是 每次我向轮播添加缩略图 我是延迟加载 时 我都需要重新计算轮播的宽度 以便所有浮动缩略图很好地并排排列 其一 我宁愿不必在 JS 中

  • 如何将外部 div 的高度设置为始终等于特定内部 div 的高度？

    我有一个外部 div 其中包含三个内部 div 我希望最左边的内部 div 始终确定外部 div 的高度 如果其他内部 div 的内容 比最左边的 div 少 它们将有空白空间 如果他们有更多的内容 比最左边的div 他们将得到一个滚动条

  • CSS 省略号与内联元素？

    我已经调整了 jQuery UI MultiSelect Widget 以便文本将显示所有选定的标签 但如果选择显示太多元素 则文本将被修剪和省略 我是这样做的 ui multiselect selected text display bl

  • CSS：将具有长单元格内容的表格限制为页面宽度？

    采用以下 CSS HTML table tr td div class stuff Long text long text long text long text long text long text long text long tex

  • 悬停时的 SVG 过滤器标签

    我正在尝试通过此过滤器对 SVG 进行动画处理

  • 粘性页脚不粘在 AngularJS 中

    Im working an angular site and im trying to implement a sticky footer across all views but the footer stops sticking whe

  • CSS：响应式布局中的高度自动问题

    我在响应式布局中使用 jquery 延迟加载 并使用空白 gif 作为预览图像 为了使延迟加载工作 我必须通过属性设置图像的高度和宽度 预览图像未设置为正确的高度 因为 height auto 似乎是通过 src 而不是通过高度属性计算高度

  • 如何自定义 Angular Material 的 input/md-input-container 组件？

    正如标题所述 我如何自定义这些元素 他们似乎使用透明背景 这在大多数背景调色板上很难查看 在 angular material css 后添加一个空白 css 文件 并在该空白 css 文件中覆盖您要自定义的规则 对于您面临的问题 我在 c

  • 如何让更大的布局适合小设备屏幕？

    我有一个小问题meta viewport元素 问题是我的布局min width比我想要使用的许多屏幕分辨率都要大 所以将其设置为 没有帮助 结果我得到的页面必须缩小以适应设备宽度 如果我什至添加像 它也不起作用 发现了一个黑客来自CSS 技

  • 为什么 Firefox 对 Helvetica 的处理方式与 Chrome 不同？

    Firefox 和 Mac 版 Chrome 中以 Helvetica 呈现的文本的垂直位置及其内容区域的大小有所不同 例如 在 Chrome 中 如果行高与字体大小相同 则下行部分将被剪裁 我调整了图中块元素的位置 保持基线一致 以说明大

随机推荐

  • AngularJS 重复 http 请求

    我正在使用 AngularJS 做一些接口 并观察 Chrome 控制台 我检测到对 API 的每个 http 请求都是重复的 有什么办法可以避免这种情况吗 这是我的简化代码 http jsonp http APIURL com api c

  • 使用 gcc 编译 DLL

    Sooooo我正在写一个脚本解释器 基本上 我希望将一些类和函数存储在 DLL 中 但我希望 DLL 在链接到它的程序中查找函数 例如 program dll send code to dll gt parse code v code co

  • 使用 C# 配置 Wifi 设置

    如何使用 C 紧凑框架 为 Win Mobile 应用程序配置 Wifi 设置 所以交易是 配置网络 隐藏APP的SSID 使用 TKIP 进行 WPA 身份验证 强制用户和密码 不会提示最终用户进行身份验证 看看智能设备框架 http w

  • Android Studio 3 中的“将项目与 gradle 文件同步”按钮在哪里？

    This button disappeared from a new 3 1 version of AS Toolbar Before it showed as 现在不见了 EDIT 他们喜欢继续使用工具栏 从 Android Studio

  • Alertmanager，不同的警报规则有不同的间隔

    我正在使用alertmanager来获取prometheus指标的警报 我对不同的指标有不同的警报规则 是否可以为每个警报规则设置不同的时间间隔 例如对于metric1 我有rule1 我需要每天检查此规则间隔 对于 metric2 我有规

  • EAV 数据库架构

    我有一个包含超过 100K 条记录的数据库 很多类别和很多项目 每个类别具有不同的属性 一切都存储在 EAV 中 如果我尝试打破这个方案并为任何类别创建一个唯一的表 我必须避免什么吗 是的 我知道我可能会有很多表 并且需要更改它们 如果我想

  • Genymotion 错误：在 Yosemite 上“无法加载 VirtualBox 引擎”。已安装 VirtualBox

    我有一台配备 OS X Yosemite 的 Macbook Pro 13 英寸 内存 8 GB 显卡 Intel Iris Graphics 6100 1536 MB 我正在尝试将 Genymotion 设置为 Android 模拟器 我

  • 将一列 int64 (YYYYMMDDHHMMSS) 转换为不带分隔符的 datetime64

    这是我的 pandas 数据框中的数据 我想转换dateTime列成日期时间64这样我就可以检查是否重复fileName存在然后找到最新的文件dateTime 正如你所看到的 这里的日期时间格式是YYYYMMDDDHHMMSS没有分隔符 f

  • jQuery 创建整个 DOM 结构

    TOP TABLE var divTop div className dynamicTableTop html p options name p appendTo obj Create div var divAO div className

  • Chrome 扩展程序——我的源代码可供用户使用吗？

    我即将向 Chrome 网上商店发布我的第一个 Chrome 扩展 他们希望将代码压缩并上传 一旦通过批准 如果我理解正确的话 它将作为 crx 文件提供给用户 但这些 crx 文件是带有 crx 扩展名的简单 zip 文件 对吧 如果这样

  • 在传递给 google.setOnLoadCallback() 的函数中使用参数；

    我正在尝试使用 Google Visualization API 来显示从 MySQL 服务器收集的数据 我想使用 PHP 获取数据 然后将其传递到 javascript 函数调用中以创建图表 当我这样做时 我在将参数传递给传递给 goog

  • 如何使用 Core Graphics 和 CALayer 绘制更精确的线条

    您好 我很难让这个 UI 元素看起来像我想要的那样 看截图 http www study en0de com good not so good jpg 请注意右侧的图像 与左侧的图像 恰好是 safari 的屏幕截图 相比 线条宽度和暗度看

  • 点击 Google Contacts API 时出现“连接被同行重置”错误

    我正在尝试使用 Google Contacts API 将 Google Contacts 拉入 Rails 应用程序 我已完成 Oauth2 握手 现在使用我的访问令牌请求受保护的资源 这是代码 uri URI https www goo

  • 为什么我们需要错误类？

    We have Throwable类是其基类Error类 对于无法恢复的错误 和Exception类 对于可恢复的 errors So 1 gt we can throw一个实现的对象error类 虽然实现没有意义Error类因为我们有Ex

  • 如何在流星中的 DOM 准备好后执行辅助函数

    我有一个清单 li 如下所示 使用 Meteor startup 用 find 填充 然后我得到这些的所有数据属性 li li 使用 data 并将其放入一个对象中并尝试 return console log 它 以便我可以查看它是否有效

  • 使用MPMusicPlayerController，设置musicPlayer.currentPlaybackTime进行seek但需要秒才能生效

    我有一个 UISlider 充当洗涤器 当拖动拇指时 我执行以下操作 void seekTo double playbackTime mPlayer currentPlaybackTime playbackTime 效果很好 音乐寻求前进

  • 无法捕获托管代码中的本机异常

    我有一个混合的 NET 和本机代码控制台应用程序 由于 Visual C 运行时库致命错误 应用程序进程被终止 即使我使用以下内容 托管代码也不会捕获本机异常 尝试 捕获块 AppDomain UnHandledExption 标记Runt

  • C++ 中的内存栅栏/屏障：boost 或其他库有它们吗？

    这些天我正在阅读有关内存栅栏和屏障的内容 作为同步多线程代码和避免代码重新排序的一种方法 我通常在 Linux 操作系统下使用 C 进行开发 并且使用boost大量的库 但我找不到任何与之相关的类 你知道boost中是否存在栅栏的内存屏障或

  • Heroku on Rails - DATABASE_URL 无效

    编辑 一般建议是使用CEDAR stack 对于 RoR Gems Heroku 和 Git 来说还很陌生 以下教程 http ruby railstutorial org book ruby on rails tutorial http

  • 通过 FontAwesome 进行星级评定的 CSS

    我已经通过不同的方法尝试了 CSS 星级评定的一些变体 并且尝试通过 FontAwesome 而不是使用精灵来实现以下内容 我希望能够理想地包含半星 但这就是下面的示例失败的地方 这是我到目前为止所尝试过的 我无法让半 部分星在这里正常工作

热门标签