SVG Icons 图标插件
SVG Icons 插件可以用二种方式输入图标：SVG Icon 区块、短代码文字，以下是一些使用示例和收集的常用图标符号，插件只能使用上传到图标集里的图标，对于此插件的短代码功能比较感些兴趣，也研究的多些，感觉还是比较好用的，代码是由 AI 帮助生成的
短代码插入文本示例
三星半
[shp-icon icon="star-fill" color="#FF0000;"][shp-icon icon="star-fill" color="#FF0000;"][shp-icon icon="star-fill" color="#FF0000;"][shp-icon icon="star-half-fill" color="#FF0000;"][shp-icon icon="star" color="#FF0000;"] 三星半五角星
[shp-icon icon="star-fill" color="#FF0000;" scale-factor="3" top-shift="1.1"] 五角星登录 退出 下载 上传
[shp-icon icon="sign-in" color="#2872FA;"] 登录 [shp-icon icon="sign-out" color="#2872FA;"] 退出 [shp-icon icon="download-simple" color="#CF2E2E;"] 下载 [shp-icon icon="upload-simple" color="#CF2E2E;"] 上传短代码链接悬停示例
<!-- 短代码链接悬停 -->
<div style="font-size:60px; text-align:center;">
<a href="#" class="icon-wrapper">
[shp-icon icon="upload-simple" color="#CF2E2E;"]
</a> 上传
</div>
<style>
.icon-wrapper {
--icon-color: #2872FA;
--icon-hover: #FF5722;
text-decoration: none;
}
.icon-wrapper [class*="shp-icon"] {
color: var(--icon-color) !important;
}
.icon-wrapper:hover [class*="shp-icon"] {
color: var(--icon-hover) !important;
}
</style>或者：
<!-- 文字链接悬停 -->
<div style="font-size:60px; text-align:center;">
[shp-icon icon="download-simple" color="#2872FA;"]
<a href="#" class="download-link">下载</a>
</div>
<style>
.download-link {
color: #666;
text-decoration: none;
}
.download-link:hover {
color: #FF5722;
}
</style>
<div style="font-size:16px; text-align:center;">或者：</div>
<!-- 文字链接悬停，内联样式 -->
<div style="font-size:60px; text-align:center;">
[shp-icon icon="download-simple" color="#2872FA;"]
<a href="#" style="color: #666; text-decoration: none;"
onmouseover="this.style.color='#FF5722'"
onmouseout="this.style.color='#666'">下载</a>
</div>SVG Icon 区块示例
第一排的卡片为显示结果，第二排为编辑示意图：不同颜色代表不同的 “列”，粗细线条代表 “列” 的结构，图标区块大小利用容器 “列” 和 “内列” 的大小、填充、间距来控制
Linux 操作系统
Ubuntu 24.04.1 LTS
nginx
高性能的 web 服务器
MySQL
关系型数据库管理系统
PHP
开源服务器脚本语言
Linux 操作系统
Ubuntu 24.04.1 LTS
nginx
高性能的 web 服务器
MySQL
关系型数据库管理系统
PHP
开源服务器端脚本语言
SVG 图标集
| check-circle | x-circle | check-fat | check-square | x-square |
| check | X | magnifying-glass | magnifying-glass-plus | magnifying-glass-minus |
| eye | eye-closed | handshake | hands-praying | wechat-logo |
| hand-peace | hand-pointing | hand-tap | thumbs-up | thumbs-down |
| smiley | smiley-wink | smiley-meh | smiley-sad | smiley-angry |
| user | user-circle | gender-male | gender-female | heart |
| cake | gift | bag | handbag | shopping-cart-simple |
| mountains | island | camera | aperture | tent-01 |
| flag | flag-pennant | tree | tree-evergreen | tree-palm |
| bus | car | jeep | subway | train-simple |
| sun-horizon | sun | moon | star-four | planet |
| cloud | cloud-sun | cloud-lightning | cloud-rain | cloud-snow |
| globe | lightning | snowflake | umbrella-simple |
| house-line | factory | building-office | city |
| device-mobile-camera | device-tablet-speaker | devices | laptop | monitor |
| computer-tower | desktop-tower | desktop | desktop-01 | hard-drives |
| power | cpu-01 | mouse | microphone | headphones |
| database | network | usb | faders | sliders |
| play | play-pause | play-circle | speaker-high | speaker-x |
| image-square | images-square | image | images |
| copy | file | files | folder | folders | folder-open |
| note | notebook | note-pencil | notepad | clipboard | clipboard-text |
| address-book | address-book-tabs | map-pin | map-pin-line | map-pin-area |
| phone | mailbox | envelope-simple | envelope-simple-open |
| lock-key | lock-key-open | key-01 | trash | gear |
| star-fill | star-half-fill | star | pentagram |
| sign-in | sign-out | export | download-simple | upload-simple |
| trend-down | trend-up | chart-line | chart-line-down | chart-line-up |
| share | share-fat | pulse | recycle |
| calendar | calculator | clock | hourglass | ruler |
| cursor | tag | warning | door | coffee | scissors |
| apple-logo-fill | windows-logo-fill | microsoft-excel-logo-fill | microsoft-powerpoint-logo-fill | microsoft-word-logo-fill |
| linux-logo | linux-logo-02 | ubuntu-logo | nginx-logo | mysql-logo | php-logo |
网站主机
云服务器
2 vCPU，4G RAM，5Mbps
Linux
软件环境
Ubuntu 24.04.1 LTS
nginx 1.29.4
MySQL 9.0.1
PHP 8.5.2
建站工具
备选方案
搭建网站入门经验，也是一个样板网站，结构虽然简单，却美观大气，并完美适配不同设备显示效果，足以胜任信息展示的企业网站
-
Shanghai, China
-
021 16162828
-
13801602828