一页书

你永远不会过度准备

按钮

用法

{% button url, text, icon [class], [title] %}

或者

{% btn url, text, icon [class], [title] %}
  • url : URL的绝对或相对路径。
  • text : 按钮文本。如果未指定icon，则为必需。
  • icon : Font Awesome icon 名称。如果未指定text，则为必需。
  • [class] : 可选。 Font Awesome class :
    • fa-fw（固定宽度）
    • fa-spin（图标旋转）
    • fa-lg（图标组合）
    • fa-2x | fa-3x | fa-4x | fa-5x（放大图标）
  • [title] : 可选。 鼠标悬停提示。

示例

带有文本、标题、图标、悬停提示的按钮

{% btn https://github.com, GitHub %}
{% btn https://github.com,,fab fa-github %}
{% btn https://github.com, GitHub, fab fa-github %}
{% btn https://github.com, GitHub, fab fa-github fa-fw fa-lg %}
{% btn https://github.com, GitHub, fab fa-github fa-fw fa-lg, GitHub %}
GitHub GitHub GitHub GitHub

文本内的按钮

有事没事 {% btn https://www.google.com,, fab fa-google %} 一下

有事没事 一下

按钮边距

<div class="text-center">
    <div>
    {% btn #,, heading %}{% btn #,, fab fa-edge %}{% btn #,, times %}{% btn #,, circle-notch %}
    </div>
    <div>
    {% btn #,, italic %}{% btn #,, fab fa-scribd %}
    </div>
    <div>
    {% btn #,, fab fa-google %}{% btn #,, fab fa-chrome %}{% btn #,, fab fa-opera %}{% btn #,, gem fa-rotate-270 %}
    </div>
</div>
0%