Skip to content

Instantly share code, notes, and snippets.

@arup-b

arup-b/Customizing An Ionicon.markdown

Created August 24, 2015 17:14
Show Gist options
  • Save arup-b/a8fda8ec0686dc8127da to your computer and use it in GitHub Desktop.
Save arup-b/a8fda8ec0686dc8127da to your computer and use it in GitHub Desktop.
Download ZIP
Customizing An Ionicon
Raw
Customizing An Ionicon.markdown
Raw
index.html
<!--
A simple starting template for Ionic Development.
-->
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/0.9.24/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.24/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<header-bar title="myTitle"></header-bar>
<content has-header="true" padding="true">
<i class="icon ion-home custom-icon"></i>
<i class="icon ion-home even-more-custom-icon"></i>
</content>
</body>
</html>
Raw
script.js
angular.module('myApp', ['ionic'])
.controller('MyCtrl', function($scope, $ionicLoading, $timeout) {
});
Raw
style.css
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.custom-icon {
font-size: 64px;
color : red;
}
.even-more-custom-icon {
font-size: 128px;
color : #3155aa;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment