Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
73 lines (72 sloc) 3.1 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Dosis|Raleway:400,700|Roboto:300,400,900," rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="mobileui.css">
<link rel="stylesheet" href="colors.css">
<link rel="stylesheet" href="icons.css">
<link rel="stylesheet" href="../button/style.css">
<link rel="stylesheet" href="../assets/css/master.css">
<style>
.content { margin-left:50px}
</style>
</head>
<body class="content">
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Icons</h2>
<p>
MobileUI also comes with its own free and open-source icon font, <a href="https://ionicons.com/v2/" target="_blank">Ionicons</a>, with over 500 icons to choose from.
</p>
<p>
The icons are in base MobileUI, for use just install base the command:
</p>
<pre>mobileui install base</pre>
<p>
And add <code>icon</code> and the Ionicon class name for the icon to show, which can be easily looked up on the <a href="https://ionicons.com/v2/" target="_blank">Ionicons</a> homepage. You can change the color add class colors for text.
</p>
<textarea class="bind-code" mode="text/html" custom-class="result-icon">
<i class="icon ion-navicon"></i>
<i class="icon ion-heart red"></i>
<i class="icon ion-refresh"></i>
<i class="icon ion-chatbox-working"></i>
<i class="icon ion-wifi green"></i>
<i class="icon ion-gear-a"></i>
<i class="icon ion-trash-a red"></i>
<i class="icon ion-clipboard blue"></i>
<i class="icon ion-pie-graph"></i>
<i class="icon ion-person-add"></i>
<br>
<i class="icon ion-ios-heart-outline"></i>
<i class="icon ion-ios-home-outline"></i>
<i class="icon ion-ios-cloud-upload-outline"></i>
<i class="icon ion-ios-loop"></i>
<i class="icon ion-ios-cart-outline"></i>
<i class="icon ion-ios-gear-outline"></i>
<i class="icon ion-ios-alarm-outline"></i>
<i class="icon ion-ios-calendar-outline"></i>
<i class="icon ion-ios-camera-outline"></i>
<i class="icon ion-ios-location-outline"></i>
<br>
<i class="icon ion-android-favorite"></i>
<i class="icon ion-android-alarm-clock"></i>
<i class="icon ion-android-calendar"></i>
<i class="icon ion-android-star-outline"></i>
<i class="icon ion-android-star-half"></i>
<i class="icon ion-android-star"></i>
<i class="icon ion-android-restaurant"></i>
<i class="icon ion-android-drafts"></i>
<i class="icon ion-android-delete"></i>
<i class="icon ion-android-happy"></i>
</textarea>
<!-- DONE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="../assets/js/main.js"></script>
</body>
</html>