Question

我试图将自己的图标添加到引导程序菜单中，但它们并未出现。我想知道我是否编辑了CSS的错误部分？以下是我的代码，网站位于：http://sc580.student.eda.kent.ac.uk/ExploreCanterbury/

throw my_exception;

Answer 1

删除以下行中的＃：

<li><a href="LocMenu"><span class="#LocIcon"></span></a></li>
<li><a href="PhotoMenu"><span class="#photosIcon"></span></a></li>
<li><a href="InfoMenu"><span class="#infoIcon"></span></a></li>

现在，修复拼错的HEIGHT，并将css包装成样式标签，如下所示：

<style>
.photosIcon {
background-image:url(img/photos.png);
width:100px;
heigHT:100px;
}
.infoIcon {
background-image:url(img/information.png);
width:100px;
heigHT:100px;
}
</style>

中提琴。

Answer 2

您的班级名称不应以#开头。

<li><a href="LocMenu"><span class="#LocIcon"></span></a></li>
<li><a href="PhotoMenu"><span class="#photosIcon"></span></a></li>
<li><a href="InfoMenu"><span class="#infoIcon"></span></a></li>

这应该是：

 <li><a href="LocMenu"><span class="LocIcon"></span></a></li>
 <li><a href="PhotoMenu"><span class="photosIcon"></span></a></li>
 <li><a href="InfoMenu"><span class="infoIcon"></span></a></li>

然后，您可以在css中引用该类，方法是将.添加到类名中。

<style>

.photosIcon {
  width: 100px
  ...
}
.infoIcon {
  width: 100px
  ...
}

</style>

对于ID，您将在{css。

中添加#

<div id="mydiv"></div>

在css中会被引用：

<style>

#mydiv{
   width: 100px;
...
}

</style>

Answer 3

现在您已经解决了语法问题（来自其他答案），您剩下的问题可能在于this StackOverflow post关于CSS background-image。

在引导程序菜单中使用图标？

3 个答案: