ソース

index.html

<p>テキスト</p>

style.css

p::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url(icon.png) no-repeat;
  margin-right: 10px;
  display: inline-block;
  transform: translateY(3px); /* 上下方向の位置を微調整する */
}

解説

上下方向でズレがおこるので、transform: translateY()を使い、上下の位置を調整します。
それだけですね、簡単です。

まとめ

position指定で位置を相対位置に指定する方法もありますが、単純にテキストの前にアイコンを設置するだけであれば、beforeを使った今回の方法が一番簡単かなと思います。
imgにして画像で設置する方法もありますが、個人的には疑似要素を使ったこの手法がオススメです。htmlがスッキリするので。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ