模板:图标

本页面正在施工中！您也可 点击此处 协助编辑，感谢各位对wiki的贡献。

×

模板信息

类型

模板

版本

稳定

描述

使用图标模板快速配置图标

作者

马小萌

来源

tools

更新

2024-07-08

示例

查看示例

快速安装/更新

快速安装说明

模板：[刷新此页面] [编辑] [页面历史]
文档：[查看] [编辑] [页面历史]

说明文档

使用图标模板快速配置图标

使用方法

可使用已支持图标库，也可自定义图片文件作为图标
目前支持图标库有
- Glyphicon Halflings 是 Bootstrap提供的gh图标（BWIKI默认支持，可直接使用）
  - 参数为：gh
- Font Awesome v4版本图标（在云小工具启用Fa资源，启用后支持v4v5v6）
  - 参数为：fa
- Font Awesome v5版本图标（在云小工具启用Fa资源，启用后支持v4v5v6）
  - 参数为：fas、far、fal、fad
- Font Awesome v6版本图标（在云小工具启用Fa资源，启用后支持v4v5v6）
  - 参数为：fa-solid、fa-regular、fa-light、fa-thin、fa-duotone、fa-sharp
- Google Font 提供的 Material Symbols图标（在云小工具启用Gf资源）
  - 参数为：gf
- Material Design Icons 图标（在云小工具启用Mdi资源）
  - 参数为：mdi

调用参数

图标库使用参数

{{图标
|<图标库名称>
|<图标名称>
|border=<图标边框>
|color=<图标颜色>
|bgcolor=<图标背景颜色>
|size=<图标大小>
|offset=<图标图片偏移>
|zoom=<图标图片缩放>
|text=<图标内显示文字>
|textborder=<图标内文字的边框粗细>
|textbordercolor=<图标内文字边框的颜色>
|left=<文字靠左>
|top=<文字靠上>
|right=<文字靠右>
|bottom=<文字靠下>
|fontsize=<文字大小>
|link=<图标链接页面名>
|title=<鼠标悬停时提示文字>
|label=<图标下显示标签文字>
|labelstyle=<标签文字样式>
}}

自定义图标使用参数

{{图标
|file=<文件名>
|border=<图标边框>
|bgcolor=<图标背景颜色>
|size=<图标大小>
|offset=<图标图片偏移>
|zoom=<图标图片缩放>
|text=<图标内显示文字>
|textborder=<图标内文字的边框粗细>
|textbordercolor=<图标内文字边框的颜色>
|left=<文字靠左>
|top=<文字靠上>
|right=<文字靠右>
|bottom=<文字靠下>
|fontsize=<文字大小>
|link=<图标链接页面名>
|title=<鼠标悬停时提示文字>
|label=<图标下显示标签文字>
|labelstyle=<标签文字样式>
}}

必填

使用图标库时
- 图标库名称：gh、fa、fas、far、fal、fad、fa-solid、fa-regular、fa-light、fa-thin、fa-duotone、fa-sharp、gf、mdi
- 图标名称：参考对应图标库网页
自定义图标时
file：图片文件名

选填

border：图标边框，如：2px solid red （格式为：宽度线条类型颜色 以空格分隔）
color：改变图标颜色，如：#88ff88 （自定义图标时无效）
bgcolor：图标背景颜色，如：#88ff88
size：图标大小，如：256px
offset：图标图片偏移，如：213px,233px （格式为：左,上 以半角逗号分隔）
zoom：图标图片缩放，如：3
text：图标内显示文字，如：示例
textborder：图标内文字的边框粗细，如：2px
textbordercolor：图标内文字边框的颜色，如：#ff0000
left：文字靠左，如：5px （不能与right同时使用）
top：文字靠上，如：5px （不能与bottom同时使用）
right：文字靠右，如：5px （不能与left同时使用）
bottom：文字靠下，如：5px （不能与top同时使用）
fontsize：文字大小，如：200%
link：图标链接页面名，如：首页
title：鼠标悬停时提示文字，如：提示
label：图标下显示标签文字，如：标签
labelstyle：标签文字样式，如：color:red;font-size:110%

注意

使用图标库用法时，file参数无效
使用自定义图标时，color参数无效
如自定义图片文件中图像非居中，可使用offset调整偏移，可使用zoom调整缩放

自定义图标示例

你所写的

abc{{图标
|file=wikilogo.png
|border=8px solid red
|size=256px
|text=图标内显示文字
|offset=206px,223px
|zoom=3
|title=鼠标悬停时提示文字
|right=8px
|bottom=15px
|fontsize=200%
|link=Index
}}def{{图标
|file=Toolswikilogo.png
|border=1px solid blue
|bgcolor=#8f8
|size=64px
|offset=20px,-9px
|zoom=1.3
|label=icon
}}ghi

显示内容

abc图标内显示文字deficonghi

Font Awesome 图标示例

你所写的

;Font Awesome v4版本图标
:{{图标
|fa
|fa-address-book
|bgcolor=#ddf
|color=#393
|size=30px
|text=FA
|title=提示文字
|link=Index
}}{{图标
|fa
|fa-address-book
|border=2px solid blue
|bgcolor=#fdd
|size=30px
|offset=-2px,-2px
|zoom=0.8
|text=FA<br>v4
|title=提示文字
|link=Index
}}
;Font Awesome v5版本图标
:abc{{图标|fas|fa-paw}}def{{图标|fas|fa-paw}}ghi
;Font Awesome v6版本图标
:{{图标|fa-solid|fa-car}}

显示内容

Font Awesome v4版本图标: FAFA
v4
Font Awesome v5版本图标: abcdefghi
Font Awesome v6版本图标

Gh、Gf、Mdi 图标

你所写的

{{图标|gh|search}}
{{图标|gf|settings}}
{{图标|mdi|mdi-arm-flex-outline|offset=0,-3px}}

显示内容

settings

所有模板列表

模板:图标

WIKI功能

目录

说明文档

使用方法

调用参数

必填

选填

注意

自定义图标示例

你所写的

显示内容

Font Awesome 图标示例

你所写的

显示内容

Gh、Gf、Mdi 图标

你所写的

显示内容