How to make flag (using flag-icon-css) fill table cell?

Question

I'm using flag-icon-css on a site.

Here is the generated HTML table row:

<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>

Here is a screenshot:

How can I make the flag larger so it looks more normal, according to the flag-icon-css it should automatically behave in this way?

Looking for a solution without using custom CSS.

This site is using Bootstrap.

Answer 1

In case you are still here.. you should use the flag-icon-background instead of flag-icon and add it to the parent which is your case is <td>:

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

And here is the full example:

<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>