Настроить размер текста в кнопке начальной загрузки

Я пытаюсь создать кнопку "Загрузить из магазина приложений", используя twitter bootstrap.

Проблема, с которой я столкнулась, заключается в том, чтобы текст "Магазин приложений" был больше, чем текст "Загрузить из" над ним.

Вот 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>

Я ценю отзывы и опыт.

Ответ 1

оберните текст и сжимайте его размером шрифта: меньшим или любым другим размером, который вам нравится.

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

Ответ 2

Собственно, подумайте об этом, вы можете произвольно сделать это, если выполнено одно из двух условий. 1) кнопка согласована по размеру, чтобы разбить ее в нужном месте (используя фиксированную ширину кнопки или сделать ее относительно размера контейнером с фиксированной шириной) или 2) применить тег <br> в нужном месте. Тогда это просто вопрос добавления псевдо-класса :first-line

.btn div {
  font-size:40px
}

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

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