Question

我在我的网站上使用facebook登录。一切都在使用facebook按钮。我想将图形图像更改为我自己的图像。我怎么能改变这个？

这是html代码：

<div class="fb-login-button cs" data-max-rows="1" data-size="xlarge"></div>

如何添加自己的CSS，以便我可以自行更改图片。

Answer 1

你可以做http://jsfiddle.net/Mohamed_nabil/2efxE/ 只需改变你的背景。

.fb_iframe_widget iframe{
    opacity: 0;
}
.fb_iframe_widget{
    background: #00D6FF;/*Change this with your custom background*/
}

Answer 2

.fb-button {
background-image: url('...');
background-repeat: no-repeat;
}

Answer 3

添加background-image指向您的图片文件所在的url()。通过background-size调整其大小。您可以将其添加到现有类（扩充该类），也可以创建新类并将新类添加到现有HTML元素。

DEMO：http://jsbin.com/gazuf/2/edit

HTML：

<div class="fb-login-button cs" data-max-rows="1" data-size="xlarge"></div>

CSS：

.fb-login-button {
  width: 128px; /* Width & height added for demo only. */
  height: 40px;
  background-image: url(http://placekitten.com/256/80);
  background-size: 128px 40px;
}

DOCS：

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

如何将图像添加到Facebook登录按钮？

3 个答案: