The code I am using is like this:

```
<div class="col-lg-2 col-md-4">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="row">
                <div class="col-xs-3">
                    <i class="fa fa-tasks fa-5x"></i>
                </div>
                <div class="col-xs-9 text-right">
                    <div class="huge">6</div>
                    <div>Maintenance</div>
                </div>
            </div>
        </div>
        <a href="/maintenance.php">
            <div class="panel-footer">
                <span class="pull-left">View Tasks</span>
                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                <div class="clearfix"></div>
            </div>
        </a>
    </div>
</div>

```

The problem is, when the window is resized the fontawesome/glyphicon is too big. How can I make it such that if the div reaches a certain minimum width, the `fa-tasks` icon won't appear?

See this below, I'd prefer for the left example if it gets any smaller than that width that it just says "6 Maintenance" *without* the icon. Obviously the one on the right is fine, and how it should ordinarily look.

Thanks

![enter image description here](https://i.stack.imgur.com/KXPBq.png)