アイコン付きボックス - ひらいたぺーじをあけてみる

FontAwesomeを利用して、任意のアイコンを組み込めるボックス。

できること

アイコンフォント部分を任意に変更できる
枠線タイプ、背景色タイプを選べる
色を変更できる
角が丸いタイプ、そのままのタイプを選べる

応用で、仕様を固定にした（毎回指定しなくても良い）専用ボックスも作れる。

CSSコード

/***** アイコン付きボックス　*****/
.iconbox {
    position: relative;
    margin: 0 5%;
    padding: 1.2em;
    box-sizing: border-box;
    color: #666666;  /* 文字色 */
    border-left: solid 100px #aaa;  /* デフォルト枠色 */
    background: #eee;  /* デフォルト背景色 */
    min-height: 50px;
}
/* 枠線タイプ */
.iconbox .bd-red {
    border: solid 3px rgba(255,136,136);  /* 上右下の枠線 */
    border-left-width: 100px;  /* 左の枠線 */
    background: #fff;
}
.iconbox .bd-blue {
    border: solid 3px rgba(138,184,255);
    border-left-width: 100px;
    background: #fff;
}
.iconbox .bd-green {
    border: solid 3px rgba(148,242,148);
    border-left-width: 100px;
    background: #fff;
}
.iconbox .bd-yellow {
    border: solid 3px rgba(255,224,104);
    border-left-width: 100px;
    background: #fff;
}
/* 背景色タイプ */
.iconbox .bg-red {
    border-left: solid 100px rgba(255,136,136);  /* 枠線左のみ */
    background: rgba(255,136,136,0.5);
    color: #777;
}
.iconbox .bg-blue {
    border-left: solid 100px rgba(138,184,255);
    background: rgba(138,184,255,0.5);
    color: #777;
}
.iconbox .bg-green {
    border-left: solid 100px rgba(148,242,148);
    background: rgba(148,242,148,0.5);
    color: #777;
}
.iconbox .bg-yellow {
    border-left: solid 100px rgba(255,224,104);
    background: rgba(255,224,104,0.5);
    color: #777;
}
.iconbox .kakumaru {
    border-radius: 30px;   /* 角の丸み */
}
.iconbox i {   /* アイコンフォントの共通設定 */
    display: inline-block;
    position: absolute;
    top: 50%;
    left: -76px;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Free";
    color: #fff;
    font-size: 54px;
    line-height: 1;
    font-weight: 900;
}

使い方

【基本】

<div class="iconbox 枠&色指定 角丸指定 ">
    <i class="アイコンフォント指定"></i>
    <p>コンテンツ本文</p>
</div>

指定項目は省略可

アイコンの変更

FontAwesomeのアイコンフォントコード<i class="～"></i>を変えたいコードに入れ替える。

<div class="iconbox">
<i class="far fa-smile-wink"></i>
<p>コンテンツ本文</p>
</div>

<div class="iconbox">
<i class="far fa-tired"></i>
<p>コンテンツ本文</p>
</div>

枠線タイプor背景色タイプ、色の変更

アイコンボックスの要素にbd-色またはbg-色のclassを追加する。

bd=border
bg=background

<div class="iconbox bd-blue"> 【←枠線・青】
<i class="far fa-smile-wink"></i>
<p>コンテンツ本文</p>
</div>

<div class="iconbox bg-green"> 【←背景色・緑】
<i class="far fa-smile-wink"></i>
<p>コンテンツ本文</p>
</div>

角を丸くする

アイコンボックスの要素にkakumaruのclassを追加する。

<div class="iconbox kakumaru">
<i class="far fa-smile-wink"></i>
<p>コンテンツ本文</p>
</div>

仕様を固定したボックス

毎回アイコンや色を指定しなくても良い。

/* 注意BOX　*/
.tyuui-box {
    position: relative;
    margin: 0 5%;
    padding: 1.2em;
    box-sizing: border-box;
    color: rgba(255,136,136);  /* 文字色 */   
    border: solid 3px rgba(255,136,136);  /* 枠色 */
    border-left-width: 100px;
    min-height: 50px;
}
.tyuui-box:before{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: -76px;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "\f06a";  /* アイコン */
    font-family: "Font Awesome 5 Free";
    color: #FFF;
    font-size: 54px;
    line-height: 1;
    font-weight: 900;
}

<div class="tyuui-box">
<p>コンテンツ本文</p>
</div>

参考元

いつもありがとうございます。

saruwakakun.com