├── fonts ├── bankmy.eot ├── bankmy.ttf ├── bankmy.woff └── bankmy.svg ├── bower.json ├── LICENSE ├── README.md ├── bankmy.css └── bankmy.less /fonts/bankmy.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nurfaizfoat/bankMY-payment-webfont/HEAD/fonts/bankmy.eot -------------------------------------------------------------------------------- /fonts/bankmy.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nurfaizfoat/bankMY-payment-webfont/HEAD/fonts/bankmy.ttf -------------------------------------------------------------------------------- /fonts/bankmy.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nurfaizfoat/bankMY-payment-webfont/HEAD/fonts/bankmy.woff -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bankmy-payment-webfont", 3 | "version": "1.0.6", 4 | "authors": [ 5 | { 6 | "name": "Nurfaiz Foat", 7 | "email": "faiz@nrfz.org", 8 | "homepage": "http://nrfz.org" 9 | } 10 | ], 11 | "moduleType": [ 12 | "globals" 13 | ], 14 | "description": "A collection of SVG webfont that contains of all main payment methods and gateways in Malaysia", 15 | "main": [ 16 | "bankmy.css", 17 | "bankmy.less", 18 | "fonts/bankmy.eot", 19 | "fonts/bankmy.svg", 20 | "fonts/bankmy.ttf", 21 | "fonts/bankmy.woff" 22 | ], 23 | "keywords": [ 24 | "malaysian", 25 | "online", 26 | "banking", 27 | "font", 28 | "webfont", 29 | "icon", 30 | "css", 31 | "vector", 32 | "svg", 33 | "maybank2u", 34 | "cimbclicks" 35 | ], 36 | "ignore": [ 37 | "**/.*", 38 | "node_modules", 39 | "bower_components", 40 | "test", 41 | "tests" 42 | ], 43 | "license": "MIT", 44 | "homepage": "http://nrfz.org/bankmy", 45 | "dependencies": { 46 | "bankmy-payment-webfont": "~1.0.3" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 nurfaizfoat 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | BankMY Payment Webfont 2 | ====================== 3 | 4 | A collection of SVG webfont that contains of all main payment methods and gateways in Malaysia http://nrfz.org/bankMY 5 | 6 | ![Screenshot of Usage BankMY](http://nrfz.org/bankMY/icon-selections-15.png?v=1) 7 | 8 | **Jom! Let's start at [BankMY](http://nrfz.org/bankMY)!** 9 | 10 | ##How to Use? 11 | 12 | Basically as usual. You just need the source .css and also the font folder. Download the master file. 13 | Upload **bankmy.css** and **font** folder to your root and start enjoying this font. 14 | Place them anywhere you like. As instance, you can use ``, `` or `
` tag to call them. i.e to show Maybank2U glyph. 15 | 16 | ```html 17 |
18 | ``` 19 | 20 | Btw, Dont forget to call the .css 21 | 22 | ```html 23 | 24 | ``` 25 | In order to size it accordingly, you can view full How-To and other classes in the [How to Use Section](http://nrfz.org/bankMY/#howto) 26 | 27 | ![Screenshot of Classes](http://nrfz.org/bankMY/icon-classes-15.png?v=1) 28 | 29 | ##Supported Payment Methods and Gateways 30 | As a starter, this set only contains 19 glyphs. 31 | More styles and options will be added in the future. 32 | [You may send me a request](mailto:faiz@nrfz.org) or just open an issue. 33 | 34 | * Maybank2U 35 | * CIMB Clicks 36 | * Bank Islam 37 | * Hong Leong Bank 38 | * AMBank 39 | * Affin Bank 40 | * Public Bank 41 | * RHB Bank 42 | * Mastercard 43 | * Visa 44 | * MEPS Cash 45 | * FPX 46 | * PayPal 47 | * Mobile Money 48 | * iPay88 49 | * MOLPay 50 | * Kuwait Finance House 51 | * Bank Rakyat 52 | * Alliance Bank 53 | 54 | ##Installation 55 | If you're using [Bower](http://bower.io/), simply `cd` to your desired location in Terminal and; 56 | ```html 57 | bower install bankmy-payment-webfont 58 | ``` 59 | Composer, Component support will be added real soon. 60 | 61 | If you're using LESS, please look for **bankmy.less**. (you should know how to use it by the time you read this. [How To](http://lesscss.org/)). 62 | 63 | ##Changelog 64 | - 26-12-2014 V1.0.0 Initial release. (15 icons) 65 | - 29-12-2014 V1.0.1 Dedicated demo site added [BankMY](http://nrfz.org/bankMY). 66 | - 30-12-2014 V1.0.2 Affin Bank logo icon added (16 icons). Bower installation added. 67 | - 30-12-2014 V1.0.3 LESS option added. More aligned stylesheet. 68 | - 04-01-2015 V1.0.4 Icon baseline known issue from ascender to descender height is fixed. Sizing classes are also added. 69 | - 09-07-2015 V1.0.5 KFH, Bank Rakyat and Alliance Bank added (19 icons). 70 | - 09-07-2015 V1.0.6 CSS class fixes for unicode issue. 71 | 72 | ##License 73 | - All the source codes are licensed under [MIT License](http://opensource.org/licenses/mit-license.html) 74 | - Attribution/credit is not required, but very much appreciated. Apa salahnya-kan :) 75 | - [BankMY Payment Webfont](http://nrfz.org/bankMY) by Nurfaiz Foat 76 | -------------------------------------------------------------------------------- /bankmy.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | 4 | @font-face { 5 | font-family: "bankmy"; 6 | src:url("fonts/bankmy.eot?v=1.0.5"); 7 | src:url("fonts/bankmy.eot?#iefix?v=1.0.5") format("embedded-opentype"), 8 | url("fonts/bankmy.woff?v=1.0.5") format("woff"), 9 | url("fonts/bankmy.ttf?v=1.0.5") format("truetype"), 10 | url("fonts/bankmy.svg?bankmy?v=1.0.5") format("svg"); 11 | font-weight: normal; 12 | font-style: normal; 13 | 14 | } 15 | 16 | [class^=" icon-"], [class*=" icon-"] { 17 | font-family: 'bankmy'; 18 | speak: none; 19 | font-style: normal; 20 | font-weight: normal; 21 | font-variant: normal; 22 | text-transform: none; 23 | line-height: 1; 24 | 25 | /* Better Font Rendering =========== */ 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | } 29 | 30 | .icon-alliance:before { 31 | content: "\e600"; 32 | } 33 | .icon-bankrakyat:before { 34 | content: "\e602"; 35 | } 36 | .icon-kfh:before { 37 | content: "\e603"; 38 | } 39 | .icon-affinbank:before { 40 | content: "\e601"; 41 | } 42 | .icon-ambank:before { 43 | content: "\61"; 44 | } 45 | .icon-bimb:before { 46 | content: "\62"; 47 | } 48 | .icon-cimb:before { 49 | content: "\63"; 50 | } 51 | .icon-fpx:before { 52 | content: "\64"; 53 | } 54 | .icon-hongleong:before { 55 | content: "\65"; 56 | } 57 | .icon-ipay88:before { 58 | content: "\66"; 59 | } 60 | .icon-m2u:before { 61 | content: "\67"; 62 | } 63 | .icon-mastercard:before { 64 | content: "\68"; 65 | } 66 | .icon-meps:before { 67 | content: "\69"; 68 | } 69 | .icon-mobile-money:before { 70 | content: "\6a"; 71 | } 72 | .icon-molpay:before { 73 | content: "\6b"; 74 | } 75 | .icon-paypal:before { 76 | content: "\6c"; 77 | } 78 | .icon-pbebank:before { 79 | content: "\6d"; 80 | } 81 | .icon-rhb:before { 82 | content: "\6f"; 83 | } 84 | .icon-visa:before { 85 | content: "\6e"; 86 | } 87 | 88 | 89 | /* ----------------- Icon Preview -----------------*/ 90 | 91 | .icon { 92 | 93 | display: inline-block; 94 | font: normal normal normal 14px/1; 95 | font-size: inherit; 96 | text-rendering: auto; 97 | -webkit-font-smoothing: antialiased; 98 | -moz-osx-font-smoothing: grayscale; 99 | } 100 | 101 | /* ----------------- Font Sizing Class -----------------*/ 102 | 103 | .besar { 104 | font-size: 1.33333333em; 105 | line-height: 0.75em; 106 | vertical-align: -15%; 107 | } 108 | 109 | .besar-1halfx { 110 | font-size: 1.5em; 111 | } 112 | 113 | .besar-2x { 114 | font-size: 2em; 115 | } 116 | 117 | .besar-2halfx { 118 | font-size: 2.5em; 119 | } 120 | 121 | .besar-3x { 122 | font-size: 3em; 123 | } 124 | 125 | .besar-3halfx { 126 | font-size: 3.5em; 127 | } 128 | 129 | .besar-4x { 130 | font-size: 4em; 131 | } 132 | 133 | .besar-4halfx { 134 | font-size: 4.5em; 135 | } 136 | 137 | .besar-5x { 138 | font-size: 5em; 139 | } 140 | -------------------------------------------------------------------------------- /bankmy.less: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @icon-font-path: '/fonts'; 4 | 5 | @font-face { 6 | font-family : "bankmy"; 7 | src : url("@{icon-font-path}/bankmy.eot?v=1.0.4"); 8 | src : url("@{icon-font-path}/bankmy.eot?#iefix?v=1.0.4") format("embedded-opentype"), 9 | url("@{icon-font-path}/bankmy.woff?v=1.0.4") format("woff"), 10 | url("@{icon-font-path}/bankmy.ttf?v=1.0.4") format("truetype"), 11 | url("@{icon-font-path}/bankmy.svg#bankmy?v=1.0.4") format("svg"); 12 | font-weight : normal; 13 | font-style : normal; 14 | } 15 | 16 | [class^="icon-"], 17 | [class*="icon-"] { 18 | &:before { 19 | speak : none; 20 | font-style : normal; 21 | font-family : "bankmy"; 22 | font-weight : normal; 23 | font-variant : normal; 24 | text-transform : none; 25 | line-height : 1px; 26 | -webkit-font-smoothing : antialiased; 27 | -moz-osx-font-smoothing : grayscale; } 28 | } 29 | 30 | .icon-alliance:before { 31 | content: "\e600"; 32 | } 33 | .icon-bankrakyat:before { 34 | content: "\e602"; 35 | } 36 | .icon-kfh:before { 37 | content: "\e603"; 38 | } 39 | .icon-affinbank:before { 40 | content: "\e601"; 41 | } 42 | .icon-ambank:before { 43 | content: "\61"; 44 | } 45 | .icon-bimb:before { 46 | content: "\62"; 47 | } 48 | .icon-cimb:before { 49 | content: "\63"; 50 | } 51 | .icon-fpx:before { 52 | content: "\64"; 53 | } 54 | .icon-hongleong:before { 55 | content: "\65"; 56 | } 57 | .icon-ipay88:before { 58 | content: "\66"; 59 | } 60 | .icon-m2u:before { 61 | content: "\67"; 62 | } 63 | .icon-mastercard:before { 64 | content: "\68"; 65 | } 66 | .icon-meps:before { 67 | content: "\69"; 68 | } 69 | .icon-mobile-money:before { 70 | content: "\6a"; 71 | } 72 | .icon-molpay:before { 73 | content: "\6b"; 74 | } 75 | .icon-paypal:before { 76 | content: "\6c"; 77 | } 78 | .icon-pbebank:before { 79 | content: "\6d"; 80 | } 81 | .icon-rhb:before { 82 | content: "\6f"; 83 | } 84 | .icon-visa:before { 85 | content: "\6e"; 86 | } 87 | 88 | /* ----------------- Icon Preview -----------------*/ 89 | 90 | .icon { 91 | 92 | display: inline-block; 93 | font: normal normal normal 14px/1; 94 | font-size: inherit; 95 | text-rendering: auto; 96 | -webkit-font-smoothing: antialiased; 97 | -moz-osx-font-smoothing: grayscale; 98 | } 99 | 100 | /* ----------------- Font Sizing Class -----------------*/ 101 | 102 | .besar { 103 | font-size: 1.33333333em; 104 | line-height: 0.75em; 105 | vertical-align: -15%; 106 | } 107 | 108 | .besar-1halfx { 109 | font-size: 1.5em; 110 | } 111 | 112 | .besar-2x { 113 | font-size: 2em; 114 | } 115 | 116 | .besar-2halfx { 117 | font-size: 2.5em; 118 | } 119 | 120 | .besar-3x { 121 | font-size: 3em; 122 | } 123 | 124 | .besar-3halfx { 125 | font-size: 3.5em; 126 | } 127 | 128 | .besar-4x { 129 | font-size: 4em; 130 | } 131 | 132 | .besar-4halfx { 133 | font-size: 4.5em; 134 | } 135 | 136 | .besar-5x { 137 | font-size: 5em; 138 | } 139 | -------------------------------------------------------------------------------- /fonts/bankmy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | --------------------------------------------------------------------------------