Octicons无法正常显示，我是否操作有误？（HTML/CSS/JS）

嗨，我刚看了你的代码和问题描述，马上就发现了核心问题——你把完整的SVG代码直接塞进了<span>的class属性里，这完全不符合HTML语法规则！浏览器根本不知道该怎么解析这种错误的写法，所以才会显示出奇怪的">"符号，而不是你想要的公文包图标。

下面我一步步给你讲怎么修正：

1. 修正标签嵌套的错误 #

class属性是用来给元素指定CSS样式类名的，绝对不能把SVG标签放在这里。正确的做法是把SVG直接放在input-group-addon的<span>内部，不需要额外套那个错误的<span>。

给你一个修正后的完整代码示例：

<div class="input-group">
  <span class="input-group-addon">
    <!-- 直接内嵌Octicons的SVG代码 -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path fill-rule="evenodd" d="M7.5 1.75C7.5.784 8.284 0 9.25 0h5.5c.966 0 1.75.784 1.75 1.75V4h4.75c.966 0 1.75.784 1.75 1.75v14.5A1.75 1.75 0 0121.25 22H2.75A1.75 1.75 0 011 20.25V5.75C1 4.784 1.784 4 2.75 4H7.5V1.75zm-5 10.24v8.26c0 .138.112.25.25.25h18.5a.25.25 0 00.25-.25v-8.26A4.233 4.233 0 0118.75 13H5.25a4.233 4.233 0 01-2.75-1.01zm19-3.24a2.75 2.75 0 01-2.75 2.75H5.25A2.75 2.75 0 012.5 8.75v-3a.25.25 0 01.25-.25h18.5a.25.25 0 01.25.25v3zm-6.5-7V4H9V1.75a.25.25 0 01.25-.25h5.5a.25.25 0 01.25.25z"/>
    </svg>
  </span>
  <input type="text" class="form-control" name="first name" placeholder="First Name">
</div>

2. 如果你想引用本地下载的SVG文件（不是内嵌） #

如果你不想把SVG代码直接写在HTML里，而是想用你下载的Octicons文件，那需要注意文件路径的正确性：

• 假设你把下载的briefcase.svg放在项目的assets/icons/文件夹里，你的HTML文件在项目根目录，那可以用<img>标签引用：

<span class="input-group-addon">
  <img src="assets/icons/briefcase.svg" alt="Briefcase" width="24" height="24">
</span>

• 注意Mac OS的文件路径是区分大小写的，比如文件名是Briefcase.svg，引用时要完全匹配大小写，不然浏览器找不到文件。

3. 额外注意事项 #

• 如果你用的是Bootstrap的input-group组件，确保已经正确引入了Bootstrap的CSS文件，不然图标和输入框的排版可能会乱，但图标本身应该能正常显示。
• 你复制的SVG代码本身是没问题的，之前的错误完全是因为把SVG放错了位置，导致浏览器解析出错。

现在你把代码改成上面的样子，应该就能看到公文包图标了！

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