ブートストラップボタンのテキストサイズをカスタマイズする

Question

私は、Twitter Storestrapを使用して「App Storeからダウンロード」ボタンを作成しようとしています。

私が抱えている問題は、「App Store」のテキストを「上からダウンロードする」テキストより大きくすることです。

ここには、私が使用しているHTMLとCSSがあります。

.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> 

私はフィードバックと専門知識を感謝します。

Answer 1

テキストを折り返してfont-sizeで縮小します。サイズは好みに応じて小さくしてください。

<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

実際には、2つの条件のうちの1つが満たされている場合、これを任意に行うことができます。 1）ボタンの大きさは、ボタンの固定幅を使用するか、または固定幅のコンテナに相対的なサイズにするか、または2）希望の場所に<br>タグを適用するだけです。そして、それは

.btn div { 
    font-size:40px 
} 

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

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