hexo美化（Bootstrap Callout和fa图标的使用方法）

jerry_huang

发布于 2024-05-22 13:51:46

970

发布于 2024-05-22 13:51:46

使用方式

{% note class_name %} Content (md partial supported) {% endnote %}

其中，class_name 可以是以下列表中的一个值：

default
primary
success
info
warning
danger

呈现效果

效果：

{% 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的写法如下：

<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图标网站：

注：需要font-awesome插件支持

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

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

👇