最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】给按钮button中的i添加背景图片

React crifan 431浏览 0评论

折腾:

【已解决】react中input-moment的icon图标ion-ios-arrow-left无法显示

期间,

需要给:

<code>&lt;button type="button" class="next-month"&gt;&lt;i class="ion-ios-arrow-right"&gt;&lt;/i&gt;&lt;/button&gt;
</code>

中的

<i class=”ion-ios-arrow-right”></i>

去添加背景图:

即,向右的箭头的png图片:

关于如何添加背景图片,去借鉴之前的:

试试

<code>/*********************************************
for input-moment using icon from http://ionicons.com
*********************************************/
.ion-ios-arrow-right {
  width: 30px;
  height: 30px;
  background: url("@{env-prefix}/assets/ios7-arrow-right.png") no-repeat;
  background-size: 30px 30px;
}
</code>

结果没显示:

突然想到,难道i是没法添加背景图的?

先去搞清楚i是干啥的

html5 i

HTML 5 <i> 标签

<i> 标签呈现斜体的文本。

-》看来不是block的元素,没法添加背景

所以换成button去试试。

【总结】

最后用代码:

<code>/*********************************************
for input-moment using icon from http://ionicons.com
*********************************************/
// .ion-ios-arrow-right {
button.next-month {
  background: url("@{env-prefix}/assets/ios7-arrow-right-30x30.png") no-repeat !important;
}

button.prev-month {
  background: url("@{env-prefix}/assets/ios7-arrow-left-30x30.png") no-repeat !important;
}

.m-calendar .toolbar button{
  background-color: #1385e5 !important;
}
</code>

以及对应图片:

实现了基本要的效果:

转载请注明:在路上 » 【已解决】给按钮button中的i添加背景图片

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
53 queries in 0.094 seconds, using 18.27MB memory