hexo美化(Bootstrap Callout和fa图标的使用方法)

使用方式

代码语言:javascript
复制
{% note class_name %} Content (md partial supported) {% endnote %}

其中,class_name 可以是以下列表中的一个值:

  • default
  • primary
  • success
  • info
  • warning
  • danger

呈现效果

效果:

代码语言:javascript
复制
{% note default %} default {% endnote %}

{% note primary %} primary {% endnote %}

{% note success %} success {% endnote %}

{% note info %} info {% endnote %}

{% note warning %} warning {% endnote %}

{% note danger %} danger {% endnote %}

{% note Content %} Content {% endnote %}

👇

default

primary

success

info

warning

danger

Content

用html的写法如下:

代码语言:javascript
复制
<div class="note default"><p>default</p></div>
<div class="note primary"><p>primary</p></div>
<div class="note success"><p>success</p></div>
<div class="note info"><p>info</p></div>
<div class="note warning"><p>warning</p></div>
<div class="note danger"><p>danger</p></div>
<div class="note danger no-icon"><p>danger no-icon</p></div>
<!-- 如果不想要标题可以在后面加上no-icon -->

default

primary

success

info

warning

danger

danger no-icon

使用[FA图标]

FA图标网站:

  1. http://www.wapadd.cn/icons/awesome/
  2. http://www.fontawesome.com.cn/faicons/

注:需要font-awesome插件支持

其中,替换第二个fa后面的值就可以显示对应的图标。FA图标查询点击这里。

代码语言:javascript
复制
<i class="fa fa-subway fa-2x"></i>
<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-5x"></i>
<i class="fa fa-play-circle fa-2x"></i>

👇