社区文档构建进行中，欢迎编辑。社区答疑群（非官方）：717421103

全站通知：

模板:图标/文档

来自WIKI实验室WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索
短•刷•阅•编•历

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

使用方法

  • 可使用已支持图标库，也可自定义图片文件作为图标
  • 目前支持图标库有
    • 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鼠标悬停时提示文字图标内显示文字defToolswikilogo.pngiconghi

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

取自“https://wiki.biligame.com/tools/index.php?title=模板:图标/文档&oldid=49496”