如何制作标志（使用flag-icon-css）填表格单元格？

Question

我在网站上使用flag-icon-css。

以下是生成的HTML表格行：

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet"/>
<table class="table">
  <thead>
    <tr>
      <th class="text-center">Location</th>
      <th class="text-center">Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-center"><span class="flag-icon flag-icon-us"></span></td>
      <td class="text-center"><a class="btn btn-primary" href="/view?+16466635449">(646) 663-5449</a></td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

以下是截图：

如何使旗帜更大，看起来更正常，根据flag-icon-css它应该以这种方式自动表现？

在不使用自定义CSS的情况下寻找解决方案。

此网站正在使用Bootstrap。

Answer 1

如果你还在这里......你应该使用flag-icon-background而不是flag-icon并将其添加到父级<td>：

<td class="flag-icon-background flag-icon-us"></td>

以下是完整的例子：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet"/>
<table class="table">
  <thead>
    <tr>
      <th class="text-center">Location</th>
      <th class="text-center">Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="flag-icon-background flag-icon-us"></td>
      <td class="text-center"><a class="btn btn-primary" href="/view?+16466635449">(646) 663-5449</a></td>
    </tr>
  </tbody>
</table>

Answer 2

据我所知，您可以在CSS中定位flag-icon类并添加font-size，这会使旗帜更大。