How to use bootstrap font using Unicode notation-CodePudding

Hi I need a dropdown which will list border options using icons. To display icons I am using bootstrap library. Below is the code I am trying

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>

<body>
  <select>
    <option>
      &#xF1AD;
    </option>
  </select>
</body>

I got the Unicode from Bootstrap docs. But icon is not rendering in the dropdown. What I am doing wrong here?

CodePudding user response：

You'd have to also set the font family on those elements. In this case you need it on the options and the select element since it shows the selection. You'd have to then override for text options. The problem is that the selected value has the wrong font.

I'm not sure what your goal is, though. An option needs text to be accessible.

.has-icons {
  font-family: "bootstrap-icons";
}

.has-icons .other-font {
  font-family: arial, sans-serif;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>

<body>
  <select >
    <option>&#xF1AD;</option>
    <option >Standard font option</option>
  </select>
</body>