将字体真棒贝宝图标添加到贝宝代码

Posted 2023-02-22

【中文标题】将字体真棒贝宝图标添加到贝宝代码

【英文标题】：Add font awesome paypal icon to paypal code

【发布时间】：2017-05-08 08:12:38

【问题描述】：

我正在尝试查看是否可以在按钮上的 PAY WITH PAYPAL 前面添加字体 awesome paypal 图标 <i class="fa fa-paypal" ></i>。

http://dagrafixdesigns.com/2019/industrial-darker/graphics.html

很像这个页面上的购物车图标<i class="fa fa-shopping-cart"></i>.

http://dagrafixdesigns.com/2017/industrial-darker/shop-details.html

但是，由于此 paypal 代码特定于我的帐户，因此到目前为止我无法使用它，我们将不胜感激。

谢谢 院长

【问题讨论】：

PayPal按钮是<input>元素，不允许包含其他元素（如<i>）。您最好的选择可能是制作一个 PNG 图标并将其设置为按钮的 background-image，然后相应地定位它。

【参考方案1】：

最好使用<button> 标记，但使用input 可以工作（根据需要调整值）：

input 
	height: 50px;
	width: 160px;
	background: none;
	border: 4px solid gray;
	text-transform: uppercase;
	position: relative;
	cursor: pointer;
	text-indent: 20px;


.fa.fa-paypal 
	position: absolute;
	line-height: 50px;
	left: 30px;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-paypal" id="botonsearch"></i>
<input type="button" value="pay with paypal" />

【讨论】：

Thx @Syden 您的答案与上述答案非常接近，我需要做更多的工作来实现相同的目标...感谢您在这方面的时间和代码 sn-p ...非常感谢您！

【参考方案2】：

将元素更改为按钮，然后设置不同的样式以匹配您输入的内容。

<button class="btn-outline btn" type="submit" target="_blank"><i class="fa fa-paypal"></i>Pay With Paypal</button>

【讨论】：

谢谢@dsadnick，你的回答很简单，因为我已经准备好了css，所以很容易解决......