时间戳

首页 > 解决方案 > CSS 菜单图标不可见

html - CSS 菜单图标不可见

问题描述

我从 fontAwesome https://fontawesome.com/icons/cogs?style=solid复制了一个齿轮图标，并希望将此图标覆盖在 svg 上。不幸的是，我看不到图标，而且测试文本也没有按照我的意愿叠加。

有什么提示吗？

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://d3js.org/d3.v6.js"></script>
    <title>HTML</title>
</head>

<style>
    body {
        overflow: hidden;
        margin: 0px;
    }

    .canvas {
        background-color: rgb(220, 220, 220);
    }

    .settings-icon {
        font-size: 40px;
        cursor: pointer;
        z-index: 1000;
    }


</style>

<body>
    <div>
        <i id="settings-icon" class="fas fa-cogs">Test</i>
    </div>

    <svg id="svg"></svg>

    <script>
        var svg = d3.select("svg")
        
        svg = d3.select("svg")
            .attr("class", "canvas")
            .attr("width", window.innerWidth)
            .attr("height", window.innerHeight)

    </script>
</body>

</html>

标签： htmlcss

解决方案

如果要显示 cog 图标，则需要包含 Font Awesome 样式表。

var svg = d3.select("svg")

svg = d3.select("svg")
  .attr("class", "canvas")
  .attr("width", window.innerWidth)
  .attr("height", window.innerHeight)
body {
  overflow: hidden;
  margin: 0px;
}

.canvas {
  background-color: rgb(220, 220, 220);
}

.settings-icon {
  font-size: 40px;
  cursor: pointer;
  z-index: 1000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.5.0/d3.min.js"></script>
<div>
  <i id="settings-icon" class="fas fa-cogs">Test</i>
</div>
<svg id="svg"></svg>

推荐阅读