/* ============================================================ 图标样式 — 基于 Font Awesome 6.4（公共 CDN，免登录免配置） - viewer.html 已 FA CSS； - 本文件用 @import 兜底（有些项目没在 head 引入 FA CSS） - 所有 .iconfont 类保持兼容，内部映射到 FA 类名 ============================================================ */ /* 如果 viewer.html 没在 引入 FA，这里兜底 */ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'); /* ============================================================ 兼容层：让原来的 .iconfont icon-xxx 类全部可用 ============================================================ */ .iconfont { font-style: normal; display: inline-block; text-align: center; vertical-align: middle; line-height: 1; font-weight: inherit; speak: none; } /* 居中通用 */ .fa { line-height: 1; vertical-align: middle; } /* iconfont class → FA class 映射 */ .icon-back { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-back::before { content: "\f060"; } /* arrow-left */ .icon-play { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-play::before { content: "\f04b"; } /* play */ .icon-pause { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-pause::before { content: "\f04c"; } /* pause */ .icon-prev { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-prev::before { content: "\f053"; } /* chevron-left */ .icon-next { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-next::before { content: "\f054"; } /* chevron-right */ .icon-fullscreen { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-fullscreen::before { content: "\f065"; } /* expand */ .icon-exit-fullscreen { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-exit-fullscreen::before { content: "\f066"; } /* compress */ .icon-loop { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-loop::before { content: "\f2f9"; } /* rotate-right */ .icon-read-mode { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-read-mode::before { content: "\f518"; } /* book-open */ .icon-dual-page { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-dual-page::before { content: "\f5da"; } /* book-open-reader */ .icon-loading { font-family: "Font Awesome 6 Free"; font-weight: 900; animation: fa-spin 1s infinite linear; } .icon-loading::before { content: "\f110"; } /* spinner */ .icon-end { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-end::before { content: "\f11e"; } /* flag-checkered */ .icon-error { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-error::before { content: "\f06a"; } /* circle-exclamation */ .icon-image-error { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-image-error::before { content: "\f03e"; } /* image */ .icon-success { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-success::before { content: "\f058"; } /* circle-check */ .icon-info { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-info::before { content: "\f05a"; } /* circle-info */ .icon-warning { font-family: "Font Awesome 6 Free"; font-weight: 900; } .icon-warning::before { content: "\f071"; } /* triangle-exclamation */ /* ============================================================ 各按钮里图标大小（按上下文） ============================================================ */ .viewer-tool-btn .iconfont, .audio-ctrl-btn .iconfont, .audio-play-btn .iconfont, .ebook-nav-icon .iconfont, .viewer-topbar-back .iconfont { font-size: 18px; } .audio-play-btn .iconfont { font-size: 22px; } .ebook-nav-icon .iconfont { font-size: 26px; } .viewer-back .iconfont { font-size: 14px; margin-right: 6px; } /* FAB 里图标 */ .webscreen-fab-bar .iconfont { font-size: 20px; line-height: 1; } /* 加载/错误里的图标 */ .viewer-loading-spinner .iconfont { font-size: 32px; } .viewer-error-icon .iconfont { font-size: 56px; color: #f87171; } .ebook-empty-icon .iconfont { font-size: inherit; color: #94a3b8; } .ebook-page-error .iconfont { margin-right: 6px; } /* 让 .iconfont 在彩色按钮里跟文字色 */ .viewer-tool-btn.active .iconfont, .audio-ctrl-btn.active .iconfont { color: inherit; }