Figma矢量图标代码获取及HTML div标签布局正确性咨询

选中目标Vector图层后，按以下方式获取可用代码，不需要借助第三方工具：

• 直接获取可嵌入的SVG代码：右键选中的图层，依次选择「Copy as」→「Copy as SVG」，直接把复制的内容粘贴到HTML对应位置即可。这种方式拿到的是原生SVG代码，可以直接通过CSS修改fill（颜色）、width/height（尺寸）属性，不会失真，不需要额外发请求加载资源。
• 导出独立SVG文件：如果需要统一管理图标资源，在右侧属性面板找到「Export」模块，选择导出格式为SVG，导出到项目静态资源目录，后续可以通过<img>标签、CSS背景图等方式引入。
  注意：不要将矢量图层导出为PNG/JPG等位图格式使用，否则缩放会模糊，也无法通过CSS灵活调整样式。

你写的代码存在几处语法、规范、结构问题，和Figma图层结构匹配、符合前端开发规范的修正点如下：

• 标签不匹配：最外层开标签是<div class="header-8">，闭标签错误写为</header>，要么统一用<header>做头部容器，要么把闭标签改成</div>，避免DOM结构错乱。
• 类名写法错误：
  • 类名中不能包含#、.这类CSS选择器特殊字符，你写的#headline.6、按钮类名里的点都是错误的：类名之间用空格分隔，特殊符号直接删掉，改成语义化名称即可，比如headline headline-6、按钮类改为button bt primary-color btn-round。
  • Bootstrap栅格类名是横杠分隔，你写的col_md_4要改成col-md-4，否则栅格样式完全不生效。
• 嵌套结构不符合规范：
  • Bootstrap要求所有row必须是container的直接子元素，你当前放卡片的第二个row和container同级，会出现宽度溢出、边距错误的问题，需要移到container内部。
  • 栅格类col-*必须是row的直接子元素，不要在row和col之间加其他div标签，否则栅格间隙、宽度计算会出错。
  • 空的<div class="col-md-4"></div>如果仅做占位，后续可以换成Bootstrap的offset-md-*偏移类，减少无意义的空标签。
• 细节错误：第二个按钮的文字LEarn More大小写错误，正确写法是Learn More。

修正后的可运行代码参考：

<body>
  <header class="header-8">
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <h1 class="headline headline-6">International Network</h1>
          <h4>We know how large objects will act, but things on a small scale</h4>
          <div class="cta">
            <button class="button bt primary-color btn-round">
              Get Quote Now
            </button>
            <button class="button bt primary-color btn-outline btn-round">
              Learn More
            </button>
          </div>
        </div>
        <div class="col-md-4"></div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="card-item">
            <div class="icn resize icn-md">
              <!-- 此处粘贴从Figma复制的SVG图标代码即可 -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</body>

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