在全日历中使用图像作为标题图标答案

【问题标题】：Using images for header icons in fullcalendar在全日历中使用图像作为标题图标
【发布时间】：2014-11-13 13:32:02
【问题描述】：

我正在使用 Adam Shaw 的 fullcalendar jquery 插件，效果非常好，在与平面设计师交谈后，他希望使用图像而不是 fullcalendar 的 prev、next、today 和三个视图图标（月、周、日）。

使用萤火虫我已经隔离了“上一个”图标，例如，正在使用跨度类

fc-button-prev

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

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

什么都没有发生。

任何想法将不胜感激

【问题讨论】：

标签： css jquery-ui fullcalendar

【解决方案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 。

【讨论】：

内联元素可以有填充：jsfiddle.net/tCaKx/1 ...并且 SO 帖子中的反引号用于代码，而不是突出显示或强调。
@WesleyMurch;填充添加在内联元素的宽度而不是高度jsfiddle.net/tCaKx/2

【解决方案2】：

在 fullcalendar 2.x 中，我必须使用以下 CSS 来更改“上一个”按钮图像：

.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;
}

【讨论】：