FontAwsomeをXPagesに組み込んでアイコンを表示したい。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"></xp:styleSheet>
<xp:styleSheet href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"></xp:styleSheet>
</xp:this.resources>
<xp:button id="button1" styleClass="btn btn-danger">
  <i class="fas fa-pen"></i>
<span style="margin-left:10px">編集</span>
</xp:button>
<xp:button id="button2" styleClass="btn btn-secondary">
  <i class="fas fa-door-closed"></i>
<span style="margin-left:10px">閉じる</span>
</xp:button>
</xp:view>





画面

概要

  • BootStrapをFontAwsomeのCSSライブラリを併用します。
  • <xp:button>タグのstyleClass属性に、CSSクラス名を割り当てます。
    • ボタンの形状、色はBootStrapのクラス名を指定。
      • btn　　　　　BootStrapのボタンを表示するクラス名
      • btn-primary　ボタンの色を指定するクラス名。ほかに、btn-secondary,btn-danger,warningなど指定可能。
    • アイコン

コード解説

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
 
　<xp:styleSheet href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">　－－－①
　</xp:styleSheet>
 
　<xp:styleSheet href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">　ーーー②
　</xp:styleSheet>
</xp:this.resources>

<xp:button id="button1" styleClass="btn btn-danger">
　<i class="fas fa-pen"></i>
　<span style="margin-left:10px">編集</span>
</xp:button>
<xp:button id="button2" styleClass="btn btn-secondary">
　<i class="fas fa-door-closed"></i>
　<span style="margin-left:10px">閉じる</span>
</xp:button>
</xp:view>

①fontawsomeのCSSの読み込み。
②bootstrapのCSS読み込み。（必要に応じて）
③スタイルクラスの割り当て
　far、fas、fa-door、fa-edit・・・FontAwsomeのアイコンクラス
　btn、btn-danger、btn-secondary・・・BootStarpでのボタンクラス
 


XPages
kazzwach
July 17, 2018 at 2:39 PM
Rating
0





No comments yetLogin first to comment...