CSS para botao ou icone

Front-end
,
#1

Ola boa tarde.

Queria saber se é possivel o seguinte: Com esse mesmo codigo, caso seja um celular, o botao video apenas o icone, e caso seja desktop, seja o botao conforme aparece.

<div class="content-header">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-10  col-xs-10">
						<h2>Cadastro de famílias</h2>
					</div>					
					<div class="col-md-2  col-xs-2 mt-2">					
						<a class="btn  btn-sm  btn-default  float-right col" th:href="@{/familias}">
							<i class="fa  fa-search"></i> 
							<span class="hidden-xs  hidden-sm">Pesquisar</span>
						</a>					
					</div>
				</div>
			</div>
		</div>

PS: eu sou pessimo de css. por isso estou com essa duvida. Estou usando admin-lte, e no menu lateral dele eu ja consigo essa responsividade, so nao estou conseguindo fazer funcionar automatico.

Com certeza falta alguma classe.

#2

O seu admin-lte usa qual versão do bootstrap?

#3

4.4.1

#4

De acordo com: https://getbootstrap.com/docs/4.4/utilities/display/#hiding-elements

Para esconde elementos em telas menores, tem que usar isso: .d-none .d-sm-block.

<span class="d-none d-sm-block">Pesquisar</span>
#5

“deu certo”. de fato escondeu. mas quebrou o leiaute do botao. no desktop o botao ficou com duas linhas e no mobile escondeu o nome mas nao diminuiu o espaco ocupado pelo botao. mas isso deve ser so ajuste das classes, vou ver com o adminlte faz com o menu lateral dele.

#6

vc nao pode forçar um css nao?

(se a largura da tela tiver um tamanho maximo de 850 pixels, ele vai fazer essa alteração)

@media screen and (max-width: 850px) {
    .classe-do-botao {
        display: none;
    }
}
#7

cheguei nessa configuracao

		<div class="content-header">
			<div class="container-fluid">
				<div class="row">
					<div>
						<h2>Pesquisa seções</h2>
					</div>					
					<div class="nav-item ml-auto">					
						<a class="nav-link btn  btn-sm  btn-default" th:href="@{/secoes/cadastrar}">
							<i class="fa fa-plus-circle"></i> 
							<span class="d-none  d-sm-inline-block">Cadastrar</span>
						</a>					
					</div>
				</div>
			</div>
		</div>

aparentemente resolve meu problema. nao sei se eh a forma correta.mas ate agora deu certo