鍍金池/ 教程/ HTML/ SVG圖標(biāo)
SVG鏈接
SVG陰影效果
SVG線性漸變
SVG文本
SVG平面陰影
SVG圖表
SVG交互
SVG時(shí)鐘
SVG漸變
SVG <pattern>元素
SVG簡介
SVG徑向漸變
SVG <filter>元素
SVG對(duì)話框效果
SVG形狀
SVG stroke屬性
SVG圖形
SVG教程
SVG事件監(jiān)聽器
SVG加載器示例
SVG腳本(JavaScript)
SVG圖標(biāo)
SVG拖動(dòng)
SVG模糊效果

SVG圖標(biāo)

支付網(wǎng)關(guān)圖標(biāo)對(duì)電子商務(wù)應(yīng)用程序服務(wù)提供商很有用。 有些授權(quán)為電子商務(wù)，在線零售商，點(diǎn)擊圖或傳統(tǒng)圖塊公司圖標(biāo)提供信用卡付款。效果如下所示 -

品牌圖標(biāo)

參考以下實(shí)現(xiàn)代碼 - 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Add custom CSS here -->
    <link href="css/demo.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">    
    <!--[if lt IE 8]><!-->
    <link rel="stylesheet" href="ie7.css">
    <!--<![endif]-->
</head>

<body>

    <div class="site-wrapper">

      <div class="site-wrapper-inner">

        <div class="cover-container">
          <div class="inner cover">               
            <ul class="list-inline payments">
                <li><i class="pw pw-clickandbuy"></i></li>
                <li><i class="pw pw-westernunion"></i></li>
                <li><i class="pw pw-braintree"></i></li>
                <li><i class="pw pw-paysafecard"></i></li>
                   <li><i class="pw pw-ideal"></i></li>
                   <li><i class="pw pw-paypal-new"></i></li>
                   <li><i class="pw pw-skrill"></i></li>
                   <li><i class="pw pw-gittip"></i></li>
                   <li><i class="pw pw-flattr"></i></li>
                   <li><i class="pw pw-cb"></i></li>
                   <li><i class="pw pw-bitcoin"></i></li>
                   <li><i class="pw pw-bitcoin-sign"></i></li>
                   <li><i class="pw pw-ripple"></i></li>
                   <li><i class="pw pw-sofort"></i></li>
                   <li><i class="pw pw-diners"></i></li>
                   <li><i class="pw pw-mastercard"></i></li>
                <li><i class="pw pw-trust-e"></i></li>
                   <li><i class="pw pw-amazon"></i></li>
                   <li><i class="pw pw-jcb"></i></li>
                   <li><i class="pw pw-google-wallet"></i></li>
                   <li><i class="pw pw-stripe"></i></li>
                   <li><i class="pw pw-square"></i></li>
                   <li><i class="pw pw-ogone"></i></li>
                   <li><i class="pw pw-verisign"></i></li>
                   <li><i class="pw pw-discover"></i></li>
                   <li><i class="pw pw-american-express"></i></li>
                   <li><i class="pw pw-paypal"></i></li>
                   <li><i class="pw pw-maestro"></i></li>
                   <li><i class="pw pw-visa"></i></li>
                   <li><i class="pw pw-visa-electron"></i></li>
                   <li><i class="pw pw-postepay"></i></li>
                   <li><i class="pw pw-cartasi"></i></li>
                   <li><i class="pw pw-unionpay"></i></li>
                   <li><i class="pw pw-ec"></i></li
               </ul>
          </div>      
        </div>

      </div>

    </div>

    <!-- JavaScript -->
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
</body>

</html>

執(zhí)行上面示例代碼，得到以下結(jié)果 -

代碼下載:https://www.yiibai.com/downloads/svg/icons.zip