如何將 Font Awesome 圖標應用於自定義文件輸入？

Question

我想用 HTML 和 CSS 進行文件輸入； 如圖所示，我使用custom-file-input的 class，但不是“瀏覽”，而是添加一個fas fa-paperclip paperclip 圖標並在輸入之前添加 label 文件

 .custom-file-input~.custom-file-label::after { content: "fas fa-paperclip"; }

 <div class="custom-file"> <p> file: </p> <input type="file" class="custom-file-input" id="validatedCustomFile" required> <label class="custom-file-label" for="validatedCustomFile"></label> </div>

為什么不顯示圖標有什么問題？

Answer 1

您不能將類作為內容轉儲並期望它起作用。 通常，您也不能將類應用於偽元素。

相反，您可以將 Font Awesome 5 圖標添加為絕對定位元素。

 .custom-file { position: relative; background: #ddd; }.custom-file i { position: absolute; right: 10px; bottom: 2px; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="custom-file"> <p> file: </p> <input type="file" class="custom-file-input" id="validatedCustomFile" required> <label class="custom-file-label" for="validatedCustomFile"></label> <i class="fas fa-paperclip"></i> </div>

如果您想要一個不錯的純 CSS 解決方案，請考慮降級到Font Awesome 4 ，這樣您就可以使用 HTML 實體作為內容：

 .custom-file-input:after { content: "\f0c6"; /* inspect an icon for this value */ font-family: FontAwesome; /* intentionally no fallback */ font-size: 16px; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="custom-file"> <p> file: </p> <input type="file" class="custom-file-input" id="validatedCustomFile" required> <label class="custom-file-label" for="validatedCustomFile"></label> </div>