Question

我正在使用Adam Shaw的fullcalendar jquery插件并且它工作得很好，在与平面设计师交谈后，他希望使用图像而不是fullcalendar的prev，next，今天和三个视图图标（月，周，日）。

使用firebug我已经隔离了“prev”图标，例如，正在使用span类

fc-button-prev

然而，当我转到css并创建应用背景图像的类时：

.fc-button-prev {
   background-image: url('../images/prev.png');
}

什么都没发生。

任何想法都将不胜感激

Answer 1

您可能需要在班级中定义display:block，如下所示：

.fc-button-prev {
   background-image: url('../images/prev.png');
display:block;
width:50px;
height:50px;
}

因为span是inline element。因此，inline element不会在其中width，height，vertical margin & padding。

Answer 2

在fullcalendar 2.x中，我不得不使用以下CSS来更改＆＃34;之前的＃34;按钮图片：

.fc-prev-button {
    background-image: url(../img/icon_arrow_left.png) !important;
    background-size: 100% 100%;
    width: 50px !important;
    height: 50px !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.fc-prev-button span {
    display: none;
}

在fullcalendar中使用图像作为标题图标

2 个答案: