html - HTML 文本和 Font Awesome 图标之间的间距

Question

我正在尝试在段落内的文本之前插入一个很棒的字体图标，但是当我将它复制为智能手机时，该图标与文本混合在一起。如果我放置 padding/margin 或类似的东西，在智能手机 View 上它会很好，但在桌面图标上会有那么多文本。如何在不更改上一个 View 的情况下使智能手机变得像桌面 View ？

这里是关于代码的一些想法:

<header>
  <h1>This is a text <br> reference <b>33131</b></h1>
  <h3>Something Here</h2>
  <p>
    <b class="b_title">Field:</b>
    <br>
    Something Here
  </p>
  <p>
    <b class="b_title">Field:</b>
    <br>
    <i class="fas fa-compass fa-fw" aria-hidden="true"></i> Something Here
  </p>
  <p>
    <b class="b_title">Field:</b>
    <br>
    <i class="fas fa-compass fa-fw" aria-hidden="true"></i> Something Here
  </p>
  <p>
    <b class="b_title">Field:</b>
    <br>
    <i class="far fa-calendar fa-fw" aria-hidden="true"></i> Something Here
  </p>
  <p>
    <b class="b_title">Field:</b>
    <br>
    <i class="far fa-clock fa-fw" aria-hidden="true"></i> Something Heredays
  </p>
</header>

<ul class="progress">
  {% for move in object.moves %}
    {% if loop.first %}
      <li class="progress__item progress__item--active">
    {% else %}
      <li class="progress__item progress__item--completed">
    {% endif %}
      <p class="progress__info"><i class="far fa-calendar fa-fw" aria-hidden="true"></i><b>Something Here</b></p>
      <p class="progress__info"><i class="fas fa-compass fa-fw" aria-hidden="true"></i><b>Something Here</b></p>
      <p class="progress__info"><b>Field:</b> Something Info Here</p>
      <p class="progress__info"><b>Field:</b> Something Info Here</p>
      <p class="progress__info"><b>Field:</b> Something Info Here</p>
      <p></p>
    </li>
  {% endfor %}
</ul>

https://jsfiddle.net/aipim/5q978fym/

我如何使用 Jinja2 它不会编译。但在下面我插入了图片以便更好地理解。

桌面版:

手机版:

Answer 1

经过大量思考和阅读，我向一位 friend 寻求帮助，他发现这是因为必须在标题中使用视口(viewport)元标记。

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, shrink-to-fit=no"
 />

终于成功了!当我在 jsfiddle 上创建示例时，我的模板必须继承自其标题。