画像＋文字の組み込み（CSS）

文章の行頭記号を任意のアイコンにする時の見た目を整えるCSSの記載方法（以下）

（アイコンと文章の見た目のガタガタを整えようとしたらドボンして、
　結構 時間がかかった）

CSSの疑似クラス「before」を利用し記載した所からスタート。

-------------------【Before】-------------------
（HTML）

<p class="timeline-title">【　在籍中に取得した資格　】</p>

（CSS①）

p.timeline-title { font-weight: bold;
　　　　　　　 　border-bottom: dotted 2px rgb(0,0,139);
　}　

（CSS②)　

p.timeline-title:before{ content: url(アイコンのパス); }

（プレビュー）

-------------------【After】-------------------
（HTML）※変化なし

　<p class="timeline-title">【　在籍中に取得した資格　】</p>

（CSS①）

p.timeline-title { font-weight: bold;
　　　　　　　 　border-bottom: dotted 2px rgb(0,0,139);
 　　　　　　　　padding-left: 30px;
　}

（CSS②）　

p.timeline-title:before{ content:"";
　　　　　　　　　　　display:inline-block;
　　　　　　　　　　　position: absolute;
                       　　　　　　　　　　　left: 150px;
　　　　　　　　　　　width:25px;
　　　　　　　　　　　height:25px;
　　　　　　　　　　　background:url(アイコンのパス) no-repeat;
　　　　　　　　　　　background-size:contain;
　}

（プレビュー）

　

概要としては…

　・display：inline-block要素を指定
　・その背景（background）としてアイコンを指定
　　（background-imageにするとNG）
　・blockの縦と横（width、height）を指定
　・poaition：absoluteで固定表示
　・文字の開始位置（padding-left）を調整

【出典】
http://hitoribucho.hatenablog.com/entry/2016/09/26/190156