Icon System
Usage
There are two methods of using icons in the project:
- inline svg icons (preffered)
- icons with background images
Inline SVG icons
Using inline SVG icons is preffered.
Their advantages:
- Scalable
- Resolution independent
- Can be recolored with CSS
- Can be animated
Disadvantages:
- Pixel-perfect icons can be blurred
To insert SVG icon place svg tag with classnames and link to icon shape:
<svg xmlns="http://www.w3.org/2000/svg" class="i i--inter-calling">
<use xlink:href="#i--inter-calling"></use>
</svg>
Classnames: i means «icon», i--inter-calling — name of the icon.
xlink:href="#i--inter-calling" — here i--inter-calling is a link to corresponding vector shape. Same as name of the icon.
xmlns="http://www.w3.org/2000/svg" — XML namespace required for IE.
How to add new icon
- Put svg icon in
src/files/icons/svg/. - Run in console
grunt makesprites.
Icons
Services
|
|
International Calling | i--inter-calling |
|
|
Call Me | i--call-me |
|
|
International Mobile Top Up | i--inter-airtime-top-up |
|
|
Domestec Mobile Top Up | i--domestic-airtime-top-up |
|
|
Money Transfer | i--money-transfer |
|
|
Visa® Virtual | i--visa-virtual |
|
|
Prepaid Visa® Card | i--prepaid-visa-card |
|
|
Bill Pay | i--bill-pay |
|
|
Friends Forever | i--friends-forever |
Service Features
| Quick Call | i--quick-call |
|
| Speed Dial | i--speed-dial |
|
| Move Service | i--move-service |
|
| Security Code | i--security-code |
|
| Print Virtual Card | i--print-virtual-card |
|
| Add Numbers | i--add-numbers |
|
| Change US Number | i--change-us-number |
|
| Change Notification Number | i--change-notification-number |
|
| Share Your Number | i--share-your-number |
Page icons
|
|
Terms & Conditions | i--terms-conditions |
|
|
Privacy Policy | i--privacy-policy |
|
|
Frequently Asked Questions | i--faqs |
|
|
Download the App | i--download-the-app |
My account
|
|
Phone Number | i--phone-number |
|
|
Unlimited Plan | i--unlim |
|
|
Recent Transactions | i--recent-transactions |
|
|
Balance | i--balance |
|
|
Time | i--time |
|
|
Number to Top Up | i--number-to-top-up |
|
|
Call History | i--call-history |
|
|
Redeem BR Card | i--redeem-br-card |
Icon plate
.plate + style [ + size ] |
.plate-large |
default | .plate-small |
|---|---|---|---|
.plate-default |
|
|
|
.plate-default-inset |
|
|
|
.plate-alt |
|
|
|
.plate-alt-highlight |
|
|
|
.plate-white |
|
|
|
.plate-transp |
|
|
|
.plate-transp-white |
|
|
|