Personalizza la dimensione del testo nel pulsante bootstrap

Question

Sto provando a creare un pulsante "Scarica dall'App Store" utilizzando il bootstrap di Twitter.

Il problema che sto avendo sta tentando di rendere il testo "App Store" più grande del testo "Scarica dal" sopra di esso.

Ecco l'HTML e il CSS che sto utilizzando.

.fixed-hero .hero-text { 
    padding-top: 90px; 
    width: 65%; 
    color:#fff; 
    font-family: Century Gothic, sans-serif; 
    font-size: 2.2em; 
    line-height: 1.5em; 
} 
.fixed-hero .hero-button { 
    padding-top: 60px; 
    width: 65%; 
} 

.btn.btn-large.btn-danger{ 
    border-style:solid; 
    border-width:1px; 
    border-color:#fff; 
    background-image: linear-gradient(to bottom, rgb(204, 81, 81), #990000); 
    text-align: left; 
} 

    <div class="hero-button text-center"> 
      <a href="#" class="btn btn-large btn-danger"> 
       <i class="icon-apple icon-3x pull-left"></i> 
       <div> 
       Download from the 
       App Store 
       </div> 
      </a> 
    </div> 

Apprezzo il feedback e l'esperienza.

Answer 1

avvolgere il testo e ridurlo con la dimensione del carattere: più piccola o qualsiasi dimensione che ti piace.

<div class="hero-button text-center"> 
     <a href="#" class="btn btn-large btn-danger"> 
      <i class="icon-apple icon-3x pull-left"></i> 
       <span style="font-size:smaller;">Download from the</span> 
      App Store 
     </a> 
</div> 

Answer 2

effettivamente venire a pensarci bene si può fare questo in modo arbitrario fornito una delle due condizioni sono soddisfatte. 1) il pulsante è di dimensioni coerenti per avere l'interruzione al punto giusto (usando la larghezza fissa del pulsante o rendendolo relativamente di dimensioni ad un contenitore a larghezza fissa) o 2) applicando un tag <br> nel punto desiderato. Poi è solo una questione di aggiungere un :first-line pseudo-classe

.btn div { 
    font-size:40px 
} 

.btn div:first-line { 
    font-size:20px 
} 

http://jsbin.com/oxivoz/2/
http://jsbin.com/oxivoz/2/edit