R言語shiny：CSSで装飾：アイコンがずれる

Question

発生している問題・エラーメッセージ

R言語のshinyを使ってウェブアプリケーション型のGUIを制作中です。

進む・戻るのアイコンが付いたボタンを作りたいのですが、
アイコンが小さすぎるため文字を拡大したところボタンのサイズも大きくなってしまいました。

そこで、ボタンのサイズをそのままにしつつ、アイコンのみを大きく表示させたいため、
cssにline-height:0.3em;を付けたのですが、
今度はIE・googleChromeでアイコンがずれるという状態になっています。
（ちなみにRstudioからrunApp()を行うとずれません。）

marginやpaddingも試したのですが、うまく行かず、
HTMLに関して初心者なのですが自分の知識の範囲で試し尽くしてうまく行かず
こちらにご相談させて頂きました。

ウェブアプリケーション・shinyでアイコンを拡大させてボタンを作る方法について
何かご存知の方がいらっしゃいましたらよろしくお願いします。

library(shiny)

mycss<-".fa-caret-left,.fa-caret-right{
  color:orange;
  font-size:25px;
  text-align:center;
  line-height:0.3em;
}"

UI<-shinyUI(fluidPage(
  tags$style(mycss),

  titlePanel("Data"),

  sidebarLayout(
    sidebarPanel(
      actionButton("button1", icon("caret-left")),
      actionButton("button2", icon("caret-right"))
    ),
    mainPanel()
  )
))

SERVER<-shinyServer(function(input, output) {})

shinyApp(UI, SERVER)

Comments

[revoiot]

HTMLファイルってありますか？

[fermat]

無い状態で制作中です。 今回、投稿にあたってui.R・server.R・style.cssの3つのファイルをまとめたスクリプトをこちらに貼っています。

[fermat]

今、少し調べただけなのですが、HTMLファイルを追加することも可能なようです。質問に目を通してくださってありがとうございます。

[revoiot]

chromeのdevelopertoolでのスクショをください。

Answer 1

transform: scale( xx, yy);
↑これを入れて解決しました。※(xx, yy)は任意の数字

解決のきっかけは、revoiot氏の「chromeのdevelopertoolでのスクショをください。」という一言（笑）
いつもIEだけで確認していたので知らなかったのですが、
chromeから要素を拾ったところ、問題となるアイコンが網掛けで表示されました。IEには無い機能ですね。
アイコンは縦長のもので、paddingやmargin、heightが働いていないことがハッキリわかる状態に。
というわけで、縦長をヒントにtransformをいじって解決しました。

chrome便利ですね。revoiotさん、ありがとうございました。

Answer 2

.fa-caret-left, .fa-caret-right {
    color: orange;
    font-size: 25px;
    text-align: center;
    line-height: 0.3em;
}
コード

これをCSSファイルに入れてfont-sizeを変化させてさせてみてください。

Answer 3

font-sizeをいじったら、大きさ変わりませんか？
bootstrapで作られたアイコンなので、おそらくそれでいけるはずです。

Comments

[fermat]

それが、font-size:25px;で理想の大きさのアイコンにしたところ、
囲んでいるボタンも大きくなってしまうという状態です。。。
ボタンのサイズはそのままにアイコン部分だけ大きくしたいと思っています。
そこで文字の行間を操作するline-heightを入れたら、
アイコンがズレるという沼にはまっています（T T）

[fermat]

自己解決しましたが、解決の糸口をくださったrevoiotさんをBAに。感謝。。。