fix(frontend): remove duplicate select arrow and show the WordPress brand icon

assets/css/main.css

@@ -2676,6 +2676,13 @@ select.form-control {
     position: relative;
 }
 
+/* .form-select::before 已经画了 FA5 箭头，隐藏原生箭头避免出现两个。 */
+.form-select select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
 .form-select::before {
     font: normal normal 900 14px/1 "Font Awesome 5 Free";
     content: '\f107';

src/Frontend/PageAdminSet.php

@@ -125,7 +125,7 @@ class PageAdminSet {
 
 		$footer = '<div class="modal-footer">'
 			. '<a target="_blank" title="' . esc_attr__('使用可视化布局配置此页面', 'aksrt') . '" data-toggle="tooltip" href="' . esc_url($widgets_url) . '" class="but c-yellow-2 padding-lg"><i class="fa fas fa-chart-pie" aria-hidden="true"></i>' . esc_html__('模块布局', 'aksrt') . '</a>'
-			. ($edit_link ? '<a target="_blank" href="' . esc_url($edit_link) . '" class="but c-yellow padding-lg"><i class="fa fas fa-wordpress" aria-hidden="true"></i>' . esc_html__('后台编辑', 'aksrt') . '</a>' : '')
+			. ($edit_link ? '<a target="_blank" href="' . esc_url($edit_link) . '" class="but c-yellow padding-lg"><i class="fa fab fa-wordpress" aria-hidden="true"></i>' . esc_html__('后台编辑', 'aksrt') . '</a>' : '')
 			. '<button class="but jb-blue padding-lg wp-ajax-submit"><i class="fa fas fa-check" aria-hidden="true"></i>' . esc_html__('确认修改', 'aksrt') . '</button>'
 			. '</div>';
 

tests/widget-system/frontend-page-edit-harness.php

@@ -286,10 +286,13 @@ namespace {
 	ob_start();
 	(new PageAdminSet())->render_modal();
 	$modal_icons = (string) ob_get_clean();
-	foreach (['fa fas fa-sliders-h', 'fa fas fa-times', 'fa fas fa-chart-pie', 'fa fas fa-wordpress', 'fa fas fa-check'] as $icon) {
+	// fa-wordpress 属于 FA5 的 Brands 字体族，需要 `fa fab` 前缀；
+	// 误用 `fa fas` 会让它解析到 Solid 族，字符盒为空、图标不显示。
+	foreach (['fa fas fa-sliders-h', 'fa fas fa-times', 'fa fas fa-chart-pie', 'fa fab fa-wordpress', 'fa fas fa-check'] as $icon) {
 		set_check(strpos($modal_icons, $icon) !== false, "modal must use the FA5 icon {$icon}");
 	}
 	set_check(strpos($modal_icons, 'class="fa fa-') === false, 'modal must not use bare FA4 icon classes');
+	set_check(strpos($modal_icons, 'fa fas fa-wordpress') === false, 'fa-wordpress must not use the Solid family');
 
 	// 文章格式：参考主题固定 standard/图像/画廊/视频 四项，不读主题注册集。
 	// 无格式时 WP 的 selected() 不选中任何项，浏览器默认落到第一项 standard。

tests/widget-system/system-tools-contract.test.cjs

@@ -236,7 +236,8 @@ test('frontend page edit icons follow the FA5 convention and the hint bar fades
   assert.match(pageAdminSet, /<i class="fa fas fa-cog fa-spin" aria-hidden="true"><\/i>/);
   assert.match(pageAdminSet, /<i class="fa fas fa-sliders-h mr10" aria-hidden="true"><\/i>/);
   assert.match(pageAdminSet, /<i class="fa fas fa-chart-pie" aria-hidden="true"><\/i>/);
-  assert.match(pageAdminSet, /<i class="fa fas fa-wordpress" aria-hidden="true"><\/i>/);
+  // fa-wordpress lives in FA5's Brands family, so it needs `fa fab`, not `fa fas`.
+  assert.match(pageAdminSet, /<i class="fa fab fa-wordpress" aria-hidden="true"><\/i>/);
   assert.match(pageAdminSet, /<i class="fa fas fa-check" aria-hidden="true"><\/i>/);
   assert.match(pageAdminSet, /<i class="fa fas fa-times" aria-hidden="true"><\/i>/);
   // No bare FA4 prefixes survive inside the feature markup.
@@ -246,6 +247,12 @@ test('frontend page edit icons follow the FA5 convention and the hint bar fades
   for (const token of ['fa-cog', 'fa-sliders-h', 'fa-chart-pie', 'fa-wordpress', 'fa-check', 'fa-times']) {
     assert.ok(fa5.includes(`.${token}:before`), `${token} is missing from Font Awesome 5.15.4`);
   }
+  // Brand icons resolve through the Brands family: .fab must set that font-family,
+  // and fa-wordpress must sit in it, otherwise the glyph box renders empty.
+  const fabRule = fa5.match(/\.fab\s*\{[^}]*\}/);
+  assert.ok(fabRule, '.fab is missing from Font Awesome 5.15.4');
+  assert.match(fabRule[0], /Font Awesome 5 Brands/);
+  assert.match(fa5, /\.fa-wordpress::?before\s*\{[^}]*content:\s*"\\f[0-9a-f]+"/i, 'fa-wordpress has no glyph content in FA5');
 
   // The transient label fades 2s after load over 1s (reference js/page-edit.js).
   assert.match(pageAdminSet, /add_action\('wp_footer', \[self::class, 'enqueue_hint_script'\], 9\)/);
@@ -269,6 +276,23 @@ test('frontend page edit icons follow the FA5 convention and the hint bar fades
     assert.match(rule, /right:\s*0?\.7em/);
     assert.match(rule, /transform:\s*translateY\(-50%\)/);
   }
+
+  // Select arrow: .form-select::before already paints the FA5 chevron, so the
+  // wrapper's <select> must reset appearance or Chrome draws the native arrow
+  // beside it. main.min.css is the runtime file PHP enqueues.
+  const mainCss = read('assets/css/main.css');
+  const mainMinCss = read('assets/css/main.min.css');
+  const arrowRule = /\.form-select select\s*\{[^}]*\}/s;
+  assert.match(mainCss, arrowRule);
+  assert.match(mainMinCss, arrowRule);
+  for (const css of [mainCss, mainMinCss]) {
+    const rule = css.match(arrowRule)[0];
+    assert.match(rule, /-webkit-appearance:\s*none/);
+    assert.match(rule, /-moz-appearance:\s*none/);
+    assert.match(rule, /(^|[^-])appearance:\s*none/);
+  }
+  // The chevron itself stays co-located so the pair is reviewed together.
+  assert.match(mainCss, /\.form-select::before\s*\{[^}]*content:\s*'\\f107'/s);
 });
 
 test('float toolbar config reaches the tinymce plugin with reference-context buttons', () => {