You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何使用CSS或参数增大Shiny应用中icon()的尺寸

如何增大Shiny应用中icon()的尺寸

下面提供几种实用方法来调整Shiny里Font Awesome图标的尺寸:

方法1:使用Font Awesome内置尺寸类

Font Awesome自带了预定义的尺寸类,直接添加到icon()的class参数里就能快速放大图标,比如fa-2x(2倍默认大小)、fa-3x(3倍)等:

icon("square_check", class = "fa fa-3x")

方法2:自定义外部CSS样式

如果需要更精细的尺寸控制,或者统一调整多个图标样式,可以在你的styles.css文件中添加规则:

/* 全局调整所有带fa类的图标 */
.fa {
  font-size: 2rem; /* 可自定义单位:px、rem、em均可 */
  /* 也可使用缩放属性 */
  /* transform: scale(1.8); */
}

/* 给特定图标单独设置样式(需先给图标添加自定义类) */
.large-icon {
  font-size: 32px;
}

随后在icon()里应用这个自定义类:

icon("square_check", class = "fa large-icon")

方法3:内联样式快速调整

不想依赖外部CSS的话,直接通过style参数给单个图标设置尺寸:

icon("square_check", class = "fa", style = "font-size: 28px;")

内容的提问来源于stack exchange,提问作者firmo23

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.20 21:32:11