Un Gran problema que he encontrado al desarrollo con Bootstrap 4 y tratando de crear una Fuente Impresionante botón que cuando creo una serie de botones, me sale diferente tamaño de los botones, la única manera de conseguir el mismo tamaño de los botones es utilizar el mismo tipo de letra para cada una, Así que el problema es debido a una Fuente Impresionante de tamaños no es la misma para cada uno.

      <a class="btn btn-outline-warning" type="button" href="#">
        <i class="fa fa-edit"></i>
      </a>

      <a class="btn btn-outline-danger" type="button" href="#">
        <i class="fa fa-trash"></i>
      </a>

Hace uno para tener un ejemplo práctico para salir de este problema ?

  • Creo que mi pregunta no merecen ser negativo nominal, porque se trata de un problema real que mucha gente va a conseguir.
  • El voto fue dado por otro usuario. Sólo he añadido una nueva Etiqueta, ‘css’, para ayudar a su pregunta de llegar a más gente. El siguiente recurso, le ayudará a mejorar sus preguntas y ayudar a reducir su Votos … meta.stackexchange.com/help/how-to-ask

3 Comentarios

  1. 4

    Sin duda se puede ajustar manualmente el tamaño de la fuente de su Fuente Impresionante iconos, me gustaría sugerir un menos dramático: .fa-fw. Esta es una clase de utilidad que es parte de la Fuente Impresionante de la hoja de estilos que ayuda a unificar el ancho de tus fuentes. Por el 4.7.0 documentación:

    Uso fa-fw para establecer los iconos en un ancho fijo. Ideal para uso al diferente
    icono de anchos de arrojar fuera de la alineación. Especialmente útil en cosas como la nav
    las listas de & lista de grupos.

    HTML:

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
    
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    
    <a class="btn btn-outline-warning" href="#">
      <i class="fa fa-fw fa-edit"></i>
    </a>
    
    <br>
    
    <a class="btn btn-outline-danger" href="#">
      <i class="fa fa-fw fa-trash"></i>
    </a>
    
    <br>
    
    <a class="btn btn-outline-success" href="#">
      <i class="fa fa-fw fa-wrench"></i>
    </a>
    
    <br>
    
    <a class="btn btn-outline-info" href="#">
      <i class="fa fa-fw fa-stop"></i>
    </a>

    En el ejemplo anterior se puede ver cómo .fa-fw ha ajustado el espacio entre iconos y todo parece igual. Usted puede notar que a pesar de que yo también eliminar type="button" de su etiqueta de anclaje como este fue resultando en Bootstrap no aplicar el CSS completo de la ban-outline-* que declaraban.

  2. 0

    Como su nombre sugiere, los iconos son nada más que ‘glorificado’ Fuentes. Como tal, que son capaces de modificar sus tamaños usando CSS en línea; o mejor aún, a través de una hoja de estilo CSS externos.

    Puede modificar el fa clase, escribiendo:

    .fa{
        font-size: 15px !important;
    }

    Simplemente cambiar el 15px a lo que sea apropiado. Así como el uso de px también puede utilizar em. También, asegúrese de incluir !important como para anular Bootstrap CSS Stylesheet entrada.

    También puede modificar el icono específico/font por entrar en la clase específica, de la siguiente manera:

    fa fa-edit{
        font-size: 15px !important;
    }

    Si usted es su propio Tema del Autor, estoy seguro de que son conscientes de cómo las hojas de estilo de trabajo, así como las prioridades, etc. Si no, entonces usted debe primero crear un Tema Niño y, a continuación, modificar el Niño solo en el Tema. Si usted modificar el tema principal, a continuación, sus modificaciones será reemplazado cuando el Tema Autor publique una actualización.

Dejar respuesta

Please enter your comment!
Please enter your name here