如何正确使用Bootstrap Icons的Code point码点？

你看到的4种写法，本质是同一个Unicode私有区码点U+F120在不同开发环境的合法转义格式，这个码点是Bootstrap图标字体里对应图标的唯一编号，所有写法生效的核心前提是：渲染对应字符时必须指定font-family: "bootstrap-icons"，否则会显示乱码或空白——因为私有区码点没有通用字符定义，只有对应字体能把它解析成目标图标。

各格式具体用法 #

• 标准Unicode记法：U+F120
  这是码点的通用标准标识格式，只用来做文档标注、索引查询，不能直接写在前端代码里生效。

• CSS场景：\F120
  这是CSS语法里的十六进制Unicode转义写法，最常用在伪元素插入图标的场景，示例：

  .custom-tag::before {
    /* 必须指定Bootstrap图标字体 */
    font-family: "bootstrap-icons";
    /* 直接填入CSS格式的码点作为伪元素内容 */
    content: "\F120";
    margin-right: 4px;
  }
  

• JavaScript场景：\uF120
  这是JS字符串语法里的Unicode转义写法，用在需要动态生成、插入图标字符的逻辑中，示例：

  const iconNode = document.createElement('span');
  iconNode.style.fontFamily = 'bootstrap-icons';
  // JS字符串里直接写转义序列，解析后就是对应图标字符
  iconNode.textContent = '\uF120';
  document.querySelector('.container').append(iconNode);
  

• HTML场景：
  你看到的&#xF120是HTML源码中对&符号做转义后的展示形式，实际写入页面使用时写即可。这是HTML的十六进制字符实体写法，可以直接写在HTML页面的文本内容里，不需要依赖JS或CSS伪元素，示例：

  <button>
    <!-- 直接在HTML内插入字符实体即可显示图标 -->
    <span style="font-family: 'bootstrap-icons'">&#xF120;</span>
    提交
  </button>
  

补充：如果你直接复制图标对应的原生字符（而不是转义写法），在保证文件编码为UTF-8、字体设置正确的前提下，三种代码环境里也都能直接生效，转义写法只是为了避免不同编码环境下的字符解析异常。

内容的提问来源于stack exchange，提问作者Kitamado