Tabs bootstrap on mobile version of icon without text, how?

Question

css

I'm using Tabs X by Katrik demos.krajee.com/tabs-x and Bootstrap v3.3.7
Tabs are displayed on the left

<?= TabsX::widget([
            'enableStickyTabs' => true,
            'items' => $items,
            'position' => TabsX::POS_LEFT,
            'bordered' => true,
            'encodeLabels' => false
        ]); ?>

the icon is displayed and then the text of the link

'label' => FI::icon(
                'file-alt',
                ['class' => 'icofont-1x']
            ) .' Размер и тираж',

I want to see only icons on tabs on the mobile version, tell me how to do this?

The HTML code looks like this

<div id="w1-container" class="tabs-x  tabs-left tab-align-left tab-bordered tabs-krajee">
<ul id="w1" class="nav nav-tabs hidden-print" data-krajee-tabsX="tabsX_00000000" role="tablist">
<li class="active"><a href="#tab0" data-toggle="tab" role="tab" aria-selected="false" aria-controls="tab0">
<i class="icofont-1x icofont icofont-file-alt"></i> Размер и тираж</a></li>

Answer 1

Or, in general, how to remove the block with tabs in the mobile version, leave one content
hidden-xs hides the tabs, and the empty space remains

Answer 2

Try to use your style.
Write a class in CSS that will work on a small screen size

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
            .my-hidden {
                display: none;
            }
        }

And in HTML use it either for the tab itself or for the test

<li class="active"><a href="#tab0" data-toggle="tab" role="tab" aria-selected="false" aria-controls="tab0">
<i class="icofont-1x icofont icofont-file-alt"></i> <div class="my-hidden">Размер и тираж</div></a></li>

In this case, the text Size and circulation on mobile phones with a resolution less than 480px in width will not appear