When the page "collapses" (adaptation for mobile) how to hide the text inside the button and leave only the icon?

<button class="btn" onclick=""><i class="icon-plus"></i> Добавить форму</button>

3 answers 3

If it is permissible to use an extra wrapper around the text

 /* Для демонстрации */ .icon-plus { background-color: forestgreen; display: inline-block; width: 5px; height: 5px; vertical-align: middle; } /* На мобильных устройствах (767px выбрано, чтобы работал пример) */ @media screen and (max-width: 767px) { .btn span { display: none; } } 
 <button class="btn" onclick=""> <i class="icon-plus"></i> <span>Добавить форму</span> </button>

If you can not use additional markup

 /* Для демонстрации */ .icon-plus { background-color: forestgreen; display: inline-block; width: 5px; height: 5px; vertical-align: middle; } /* На больших устройствах (768px выбрано, чтобы работал пример) */ @media screen and (min-width: 767px) { .btn::after { content: 'Добавить форму'; display: inline-block; } } 
 <!-- Текст удален специально, он будет добавлен с помощью стилей --> <button class="btn" onclick=""> <i class="icon-plus"></i> </button>

Click on the link "Full page" after running the code so that the text on the button appears.

    Expand the entire screen and the text will appear, change the media expression and image for themselves.

     span { display: none; } .icon-plus { background: url(http://s.sk-gaming.com/image/member/9/0d7ae43aad8c6dd0m.jpg); width: 50px; height: 50px; display: inline-block; } @media (min-width: 800px) { span { display: inline-block; } } 
     <button class="btn" onclick=""><i class="icon-plus"></i><span>Добавить форму</span> </button>

      For Bootstrap 3, use the .hidden-xs class

      For Bootstrap 2 use the class .hidden-phone

       <button type="submit" name="btnSave" id="btnSave" class="btn btn-primary"> <i class="icon-save"></i> <span class="hidden-xs">Добавить форму</span> </button>