易百教程

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>

执行上面示例代码，得到以下结果 -

代码下载:https://www.yiibai.com/downloads/svg/icons.zip


  

上一篇： SVG对话框效果 下一篇： SVG时钟

随机教程