Fit CSS form icon

Navigation
1

I have the following form

However,theh3iconfromabovewasOK,butthenexttitlesthatIput,areontheformside,howdoIadjustit?

HTML:

<h3class="titulos_cadastro"><i class="rt-icon2-waves"></i> Dados Profissionais</h3>

        <div class="col-sm-8">
            <div class="form-group">
                <label for="name" class="sr-only">Nome do Perfil
                    <span class="required">*</span>
                </label>
                <input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Nome do Perfil">
                <i class="rt-icon2-user"></i>
            </div>
        </div>      
        <div class="col-sm-4">
            <div class="form-group">
                <label for="name" class="sr-only">Sua Categoria
                    <span class="required">*</span>
                </label>
                <select aria-required="true" id="" name="" class="form-control">
                    <option>Sua Categoria</option>
                </select>
            </div>
        </div>  

        <div class="col-sm-4">
            <div class="form-group">
                <label for="name" class="sr-only">Telefone
                    <span class="required">*</span>
                </label>
                <input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Seu Telefone">
                <i class="rt-icon2-phone"></i>
            </div>
        </div>      
        <div class="col-sm-4">
            <div class="form-group">
                <label for="name" class="sr-only">WhatsApp
                    <span class="required">*</span>
                </label>
                <input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Seu WhatsApp">
                <i class="rt-icon2-whatsapp"></i>
            </div>
        </div>                                
        <div class="col-sm-4">
            <div class="form-group">
                <label for="name" class="sr-only">Cabelo
                    <span class="required">*</span>
                </label>
                <select aria-required="true" id="" name="" class="form-control">
                    <option>Cabelo</option>
                </select>
            </div>
        </div>            

        <div class="col-sm-4">
            <div class="form-group">
                <label for="name" class="sr-only">Idade
                    <span class="required">*</span>
                </label>
                <select aria-required="true" id="" name="" class="form-control">
                    <option>Sua idade</option>
                </select>
            </div>
        </div>      
        <div class="col-sm-4">
            <div class="form-group">
                <label for="name" class="sr-only">Sua Cidade
                    <span class="required">*</span>
                </label>
                <select aria-required="true" id="" name="" class="form-control">
                    <option>Sua Cidade</option>
                </select>
            </div>
        </div>                                
        <div class="col-sm-4">
            <div class="form-group">
                <label for="name" class="sr-only">Altura
                    <span class="required">*</span>
                </label>
                <input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Sua Altura">
                <i class="rt-icon2-layers"></i>
            </div>
        </div> 

        <div class="col-sm-4">
            <div class="form-group">
                <label for="name" class="sr-only">Peso
                    <span class="required">*</span>
                </label>
                <input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Seu Peso">
                <i class="rt-icon2-media-record"></i>
            </div>
        </div>      
        <div class="col-sm-4">
            <div class="form-group">
                <label for="name" class="sr-only">Você faz
                    <span class="required">*</span>
                </label>
                <select aria-required="true" id="" name="" class="form-control">
                    <option>Sua Cidade</option>
                </select>
            </div>
        </div>                                
        <div class="col-sm-4">
            <div class="form-group">
                <label for="name" class="sr-only">Locais de Atendimento
                    <span class="required">*</span>
                </label>
                <input type="text" aria-required="true" value="" name="name" id="name" class="form-control with-icon" placeholder="Sua Altura">
                <i class="rt-icon2-layers"></i>
            </div>
        </div>

        <h3 class="titulos_cadastro"><i class="rt-icon2-photo"></i> Foto de Capa</h3>
        <div class="col-sm-12">
            <div class="form-group">
                <label for="name" class="sr-only">Nome do Perfil
                    <span class="required">*</span>
                </label>
                <input type="file" class="form-control">
            </div>
        </div>
    
asked by anonymous 25.02.2018 / 13:43

1 answer

1

Without your CSS it is difficult to give a 100% accurate answer. But in this test I did using display: inline-block; it worked.

See the example below with the icons in the right place. 

.rt-icon2-waves, .rt-icon2-photo {
    width: 24px;
    height: 24px;
    background-image: url(http://placeskull.com/32/32);
    display: inline-block;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    
    <h3 class="titulos_cadastro"><i class="rt-icon2-waves"></i> Dados Profissionais</h3>

    <div class="col-sm-8">
        <div class="form-group">
            <label for="name" class="sr-only">Nome do Perfil
                <span class="required">*</span>
            </label>
            <input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Nome do Perfil">
            <i class="rt-icon2-user"></i>
        </div>
    </div>      
    <div class="col-sm-4">
        <div class="form-group">
            <label for="name" class="sr-only">Sua Categoria
                <span class="required">*</span>
            </label>
            <select aria-required="true" id="" name="" class="form-control">
                <option>Sua Categoria</option>
            </select>
        </div>
    </div>  

    <div class="col-sm-4">
        <div class="form-group">
            <label for="name" class="sr-only">Telefone
                <span class="required">*</span>
            </label>
            <input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Seu Telefone">
            <i class="rt-icon2-phone"></i>
        </div>
    </div>      
    <div class="col-sm-4">
        <div class="form-group">
            <label for="name" class="sr-only">WhatsApp
                <span class="required">*</span>
            </label>
            <input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Seu WhatsApp">
            <i class="rt-icon2-whatsapp"></i>
        </div>
    </div>                                
    <div class="col-sm-4">
        <div class="form-group">
            <label for="name" class="sr-only">Cabelo
                <span class="required">*</span>
            </label>
            <select aria-required="true" id="" name="" class="form-control">
                <option>Cabelo</option>
            </select>
        </div>
    </div>            

    <div class="col-sm-4">
        <div class="form-group">
            <label for="name" class="sr-only">Idade
                <span class="required">*</span>
            </label>
            <select aria-required="true" id="" name="" class="form-control">
                <option>Sua idade</option>
            </select>
        </div>
    </div>      
    <div class="col-sm-4">
        <div class="form-group">
            <label for="name" class="sr-only">Sua Cidade
                <span class="required">*</span>
            </label>
            <select aria-required="true" id="" name="" class="form-control">
                <option>Sua Cidade</option>
            </select>
        </div>
    </div>                                
    <div class="col-sm-4">
        <div class="form-group">
            <label for="name" class="sr-only">Altura
                <span class="required">*</span>
            </label>
            <input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Sua Altura">
            <i class="rt-icon2-layers"></i>
        </div>
    </div> 

    <div class="col-sm-4">
        <div class="form-group">
            <label for="name" class="sr-only">Peso
                <span class="required">*</span>
            </label>
            <input type="text" aria-required="true" size="30" value="" name="name" id="name" class="form-control with-icon" placeholder="Seu Peso">
            <i class="rt-icon2-media-record"></i>
        </div>
    </div>      
    <div class="col-sm-4">
        <div class="form-group">
            <label for="name" class="sr-only">Você faz
                <span class="required">*</span>
            </label>
            <select aria-required="true" id="" name="" class="form-control">
                <option>Sua Cidade</option>
            </select>
        </div>
    </div>                                
    <div class="col-sm-4">
        <div class="form-group">
            <label for="name" class="sr-only">Locais de Atendimento
                <span class="required">*</span>
            </label>
            <input type="text" aria-required="true" value="" name="name" id="name" class="form-control with-icon" placeholder="Sua Altura">
            <i class="rt-icon2-layers"></i>
        </div>
    </div>

    <h3 class="titulos_cadastro"><i class="rt-icon2-photo"></i> Foto de Capa</h3>
    <div class="col-sm-12">
        <div class="form-group">
            <label for="name" class="sr-only">Nome do Perfil
                <span class="required">*</span>
            </label>
            <input type="file" class="form-control">
        </div>
    </div>
    
25.02.2018 / 15:07
Batch INSERT c # Make inclusion of the respective user Laravel 5.5 Auth Default