首页 > 解决方案 > 如何在里面使用 font-awesome 图标

问题描述

我试图在选项标签中插入 fontawsome 性别图标并更改图标的颜色,我尝试了网上所有可能的建议,但我无法弄清楚。这是代码

function listGender($sex){
    global $lang;
    $list = '';
    $list .= '<option ' . selCurrent($sex, 1) . ' value="1">' . $lang['male'] . '</option>';
    $list .= '<option ' . selCurrent($sex, 2) . ' value="2">' . $lang['female'] . '</option>';
    $list .= '<option ' . selCurrent($sex, 3) . ' value="3">' . $lang['other'] . '</option>';
    return $list;
}

有人可以指导我吗?

标签: phpfont-awesome

解决方案


在 < option > 标签内你不能使用 < i > 标签,所以在这种情况下你必须使用 fa 图标的 uni-code(在font awesome website给出)。

您必须将 < option >的字体家族提及为FontAwesome,然后提供 unicode,如下所示:

<option style=" font-family: 'FontAwesome';" value="male">&#xf183;</option>

对于完整代码,您可以在 html 下运行并检查:

<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>

<body>

<select>
    <option  value="left">Select</option>
    <option style=" font-family: 'FontAwesome';" value="male">&#xf183;</option>
    <option style=" font-family: 'FontAwesome';" value="female">&#xf182;</option>
</select>

</body>
</html>

推荐阅读