Bootstrap环境下Facebook登录按钮图标显示及跳转异常求助

嘿，我来帮你搞定这个问题！先拆解下你遇到的两个小坑：

• 第一个<input>按钮：它是单闭合标签，没法在内部嵌套图标元素，所以Bootstrap的btn-social类根本没法发挥作用，自然看不到图标；
• 第二个<button>按钮：点击没跳转大概率是window.location的写法不对，得用window.location.href才能让浏览器正确触发跳转，另外咱们完全可以复用Bootstrap的现成样式，不用自己写背景色~

下面给你几个靠谱的解决方案，按推荐程度排序：

方案一：修复Button标签的跳转逻辑（最推荐） #

直接贴合Bootstrap的btn-social组件结构，同时修正跳转代码：

<button onclick="window.location.href = '<?php echo $loginURL ?>';" class="btn btn-block btn-social btn-facebook">
  <span class="fa fa-facebook mr-2"></span> Login met Facebook
</button>

为啥这个能行？

• <button>是双闭合标签，能嵌套<span>图标，完美适配btn-social的要求，图标自然能显示；
• 把window.location改成window.location.href，明确告诉浏览器要跳转的地址，解决点击无反应的问题；
• 用btn-facebook类直接自带Facebook的蓝底白字样式，不用自己写内联样式，更规范。

方案二：用A标签替代按钮（更符合语义） #

其实登录按钮本质是个跳转链接，用<a>标签更符合HTML语义，Bootstrap也完全支持给<a>加按钮类：

<a href="<?php echo $loginURL ?>" class="btn btn-block btn-social btn-facebook">
  <span class="fa fa-facebook mr-2"></span> Login met Facebook
</a>

这个方案的好处：

• 不用写JS的onclick事件，靠原生href跳转，稳定性拉满；
• 完全遵循Bootstrap组件规范，图标和文本肯定在同一按钮区域，不用折腾样式。

方案三：给Input按钮加图标（不推荐，仅作参考） #

因为<input>不能嵌套元素，要显示图标只能靠背景图片硬怼：

<input type="button" onclick="window.location.href = '<?php echo $loginURL ?>';" 
       class="btn btn-block btn-facebook" 
       style="background-image: url('你的Facebook图标路径'); background-position: left 10px center; background-repeat: no-repeat; padding-left: 40px;"
       value="Login met Facebook">

这个方法缺点很明显：得自己调图标位置、大小，后期改样式麻烦，不如前两个方案省心。

最后提醒下：确保你已经引入了Font Awesome图标库哦，不然fa fa-facebook类是显示不出图标的！

内容的提问来源于stack exchange，提问作者tom