简单的段落标题样本

#风采金融 作者: 访问:253

本篇介绍如何在段落标题套用 Font Awesome 图标和媒体库的图片,喜欢的站长可以参考看看喔~

Table of Contents

设置方式使用Font Awesome 图标选择 Font Awesome 图标CSS设定範例使用 媒体库图片选择媒体库图片CSS设定範例设置方式

于「外观>>自订>>附加的 CSS」贴上代码

可参考这篇  段落标题的自订与设计

颜色选择可以参考这篇 免费线上选色工具

使用Font Awesome 图标选择 Font Awesome 图标

原理请参考这篇:如何在网站引用 Font Awesome 图标

CSS设定

本次示範 Font Awesome 5

.自订的名称{position: relative;color: #33337d; /* 标题颜色 */padding-left: 45px;}.自订的名称:before {position: absolute;content: "\填入需要的图标代号";font-family: 'Font Awesome\ 5 Free';font-weight: 900;color:#7d3333; /* 图标颜色 */left:0px;}範例使用 媒体库图片选择媒体库图片

将「複製连结」的网址完整複製,建议使用 小尺寸的 png 档

CSS设定

.自订的名称{color: #ee5b60; /* 标题颜色 */background: url(图片网址贴在这里) no-repeat;background-size: 40px;font-weight: 700; /* 粗体 */margin: 20px 0;padding-left: 45px;font-size: 27px; /* 标题文字大小 */}範例font图标awesome图片标题px自订媒体库css