SVG教學 » SVG圖示

SVG圖示

支付閘道器圖示對電子商務應用程式服務提供商很有用。 有些授權為電子商務，線上零售商，點選圖或傳統圖塊公司圖示提供信用卡付款。效果如下所示 -

品牌圖示

參考以下實現程式碼 - 

<!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>

執行上面範例程式碼，得到以下結果 -

程式碼下載:/upload/icons.zip