社区文档构建进行中,欢迎编辑。社区答疑群(非官方):717421103,点点小课堂(腾讯会议):5696651544

全站通知:

模板:图标

来自WIKI实验室WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索
模板信息
类型
模板
版本
稳定
描述
使用图标模板快速配置图标
作者
来源
更新
2024-07-08
示例
快速安装/更新

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

使用方法

  • 可使用已支持图标库,也可自定义图片文件作为图标
  • 目前支持图标库有
    • Glyphicon Halflings 是 Bootstrap提供的gh图标 (BWIKI默认支持,可直接使用)
      • 参数为:gh
    • Font Awesome v4版本图标 (在云小工具启用Fa资源,启用后支持v4v5v6)
      • 参数为:fa
    • Font Awesome v5版本图标 (在云小工具启用Fa资源,启用后支持v4v5v6)
      • 参数为:fasfarfalfad
    • Font Awesome v6版本图标 (在云小工具启用Fa资源,启用后支持v4v5v6)
      • 参数为:fa-solidfa-regularfa-lightfa-thinfa-duotonefa-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


所有模板列表