简单的项目符号清单 – 图标篇 – 创作者学苑

本篇介绍 Font Awesome 图标 的符号清单样式,喜欢的站长可以参考看看喔~

Table of Contents

设置方式选择 Font Awesome 图标用 CSS 设定图标本次示範 Font Awesome 5範例用 HTML标籤使用图标HTML标籤设置方式

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

可参考这篇  清单的自订与设计

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

选择 Font Awesome 图标

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

用 CSS 设定图标

优点是更显 content 内的图标编号,即可全面替换该位置所使用的图标

本次示範 Font Awesome 5

.zi_list ul{counter-reset:list;list-style-type:none;padding:0;}.zi_list ul li{position:relative;padding: 0 0 0 20px;margin: 7px 0 7px 0px;font-weight: bold;font-size:14px;line-height: 30px;}.zi_list ul li:before{margin-right:10px;content: "\填入需要的图标代号";font-family: 'Font Awesome\ 5 Free'; font-weight: 900;color:#00ca71; /* 图标颜色 */font-size:20px;}

若要设定第二层的清单图标,则再添加

.zi_list ul li ul li:before{margin-right:10px;content: "\填入需要的图标代号";font-family: 'Font Awesome\ 5 Free';font-weight: 900;color:#005dba;font-size:20px;}範例用 HTML标籤使用图标

须留意用HTML设置,无法像CSS 修改代码后,全部统一变更所使用的图标

HTML标籤

    护照/护照影本签证当地外币、台币2吋证件照*2信用卡font图标pxawesomelistul标籤csszi
上一篇: 下一篇: