FontAwesome Sample

アイコンにテキストを重ねる

FontAwesomeのアイコンの上にテキストを表示します。アイコンとテキストを重ねることで意味を強調できたり通知件数などに応用できます。

31 注目 禁止 123

アイコンの上にテキストを重ねる方法については、FontAwesomeでもクラスが用意されていますが、SVG+JQueryが必要になり他のアイコン設定に影響する事と日本語（２バイト文字）には対応していなさそうでしたのでここでは解説していません。独自で作成したCSSのスタイルのみで実現する方法を解説します。

CSSでスタイルを指定する

icon_layersクラスの要素内にアイコンタグとテキストタグを配置します。icon_layers_iconクラスとicon_layers_textクラスでサイズや位置などの調整をおこなっておりますので、使う場合にはサイズや位置調整などをおこなってください。またカウンターの場合は、icon_layers_counterクラスでスタイルを指定しています。こちらもお使いになる場合には調整をおこなってください。

  • HTML
<!-- テキスト -->
<span class="icon_layers">
	<i class="fas fa-calendar icon_layers_icon"></i>
	<span class="icon_layers_text">31</span>
</span>

<!-- カウンター -->
<span class="icon_layers">
	<i class="far fa-envelope icon_layers_icon"></i>
	<span class="icon_layers_counter">123</span>
</span>
  • CSS
.icon_layers{
	display: inline-block;
    height: 3em;
    line-height: 3em;
	min-width: 3em;
    position: relative;
    vertical-align: middle;
	text-align: center;
}

.icon_layers_icon{
	position: absolute;
	left: 0;
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: 3em;
}

.icon_layers_text{
	position: relative;
	top: 0.4em;
	min-width: 100%;
	color: #fff;
	font-size: 1.4em;
}

.icon_layers_counter{
	position: absolute;
	top: 0;
	right: -5px;
	display: inline-block;
	padding: 3px 5px;
	line-height: 1;
	color: #fff;
	background: #ff3333;
	font-size: 0.6em;
	border-radius: 1em;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
}