Ionicons experiments

Developer
Lizz
Size
4,717 Kb
Views
50,600
  1. Ionicons experiments Previews
  2. Ionicons experiments HTML Codes
  3. Ionicons experiments CSS Codes
  4. Ionicons experiments JS Codes

How do I make an ionicons experiments?

Ionicons hover circle bg experimenthttp://www.myonlinebiz.com.au/index.php/features-mainmenu-47/continued-vertex-features/ion-icons-integrated. What is a ionicons experiments? How do you make a ionicons experiments? This script and codes were developed by Lizz on 18 August 2022, Thursday.

Ionicons experiments Previews
IQ Test

Ionicons experiments - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ionicons experiments</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script> </head> <body ng-app="ionicApp"> <ion-nav-bar class="nav-title-slide-ios7 bar-positive"></ion-nav-bar> <ion-nav-view animation="slide-left-right"></ion-nav-view> <ion-view title="Ionicons - Hover effects + circle background"> <ion-content class="padding"> <a class="icon-circle-bg"> <i class="ion-star"></i> </a> <div class="item item-calm bg-circle icon-circle"> <i class="non-hover ion-ios7-star"></i> <i class="on-hover ion-headphone"></i> </div> <br> <div class="item item-royal bg-circle"> ask;djfa;sldkfj;alsdkjfa;lskdjf;alskdjfal;skdjfa;sldkfja;lsdkjfa;slkdfjf<br>hi<br>noo </div> <p> http://davidwalsh.name/css-circles <br><br> http://www.myonlinebiz.com.au/index.php/features-mainmenu-47/continued-vertex-features/ion-icons-integrated<br><br> Ion Icons Integrated<br><br>
Written by Super User <br>Category: Demo Info Published: 06 August 2014 Hits: 59
<div class="icon_outer_wrap">
<div class="icon_hover"><a href="" class="ion-ios7-star-outline icon_element"></a></div>
<div class="icon_non_hover"><span class="ion-ios7-star icon_element"></span></div>
</div>
<div id="DIV_1" class="icon_outer_wrap">
<div class="icon_hover"><a href="" class="ion-link icon_element"></a></div>
<div class="icon_non_hover"><span class="ion-headphone icon_element"></span></div>
</div>
</p> <div class="item item-button-right"> Call Ma <button class="button button-positive"> <i class="icon ion-ios7-telephone"></i> </button> </div> CLEAR: Note: The text will take the color of the applied button style, meaning button-positive will result in blue text and no border instead of a blue background. <table> <thead> <tr> <th>Size </th> <th>Normal</th> <th>Outline</th> <th>Clear</th> </tr> </thead> <tbody> <tr> <td>Normal, using button tag</td> <td><button class="button button-positive"> button positive
</button></td> <td><button class="button button-outline button-positive"> Outlined Positive
</button></td> <td> <button class="button button-clear button-positive"> Clear Positive
</button> </td> </tr> <tr> <td>Normal, using a tag</td> <td><a class="button button-positive"> button positive
</a></td> <td><a class="button button-outline button-positive"> Outlined Positive
</a></td> <td> <a class="button button-clear button-positive"> Clear Positive
</a> </td> </tr> <tr> <td>small, using a tag</td> <td><a class="button-small button button-positive"> button +
</a></td> <td><a class="button-small button button-outline button-positive"> -outline +
</a></td> <td> <a class="button-small button button-clear button-positive"> -clear +
</a> </td> </tr> <tr> <td>large, using &lt;a&gt; tag</td> <td><a class="button-large button button-positive"> button +
</a></td> <td><a class="button-large button button-outline button-positive"> -outline +
</a></td> <td> <a class="button-large button button-clear button-positive"> -clear +
</a> </td> </tr> </tbody> </table> <button class="button button-clear button-balanced"> Clear Button
</button> <button class="button button-outline button-stable"> Outlined Button
</button> <br> <button class="button button-small button-dark"> Small Button
</button>
<button class="button button-large button-light"> Large Button
</button>
<hr>
"button button-icon icon ion-*"<br>
<a class="button button-icon icon ion-settings"></a><br><br>
"button-icon icon ion-*" (no button class)<br>
<a class=" button-icon icon ion-settings"></a><br><br> "button button-icon button-royal icon ion-*"(add button-royal class)<br>
<a class="button button-icon button-royal icon ion-settings"></a><br><br> "button button-icon royal icon ion-*"(add royal class)<br>
<a class="button button-icon royal icon ion-settings"></a><br><br>
"button button-outline button-calm button-small button-icon icon ion-*"<br>
<a class="button button-outline button-calm button-small button-icon icon ion-settings"></a><br> "button button-large button-icon icon ion-*"<br> <a class="button button-large button-icon icon ion-settings"></a><br><br>
"button button-large button-icon button-outline icon ion-*"<br>
<a class="button button-large button-icon button-outline icon ion-settings"></a><br><br>
"button button-large icon ion-*"<br>
<a class="button button-large icon ion-settings"></a><br>
"button button-large button-icon ion-*"<br>
<a class="button button-large button-icon ion-settings"></a><br> Icon Buttons
Icons can easily be added to any button by using either the built in Ionicons, or any custom font-pack you choose. Learn more about icons.
Icons can also be set with a child element inside the button, however, assigning the icon directly to the button reduces the number of elements in the DOM.
<button class="button"> <i class="icon ion-loading-c"></i> Loading...
</button>
<button class="button icon-left ion-home">Home</button>
<button class="button icon-left ion-star button-positive">Favorites</button>
<a class="button icon-right ion-chevron-right button-calm">Learn More</a>
<a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>
<button class="button icon ion-gear-a"></button>
<a class="button button-icon icon ion-settings"></a>
<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a> <!--div id="DIV_6">	<div id="DIV_1" class="icon_outer_wrap">	<div id="DIV_2" class="icon_hover">	<a href="/" id="A_3" class="ion-link icon_element"></a>	</div>	<div id="DIV_4" class="icon_non_hover">	<span id="SPAN_5" class="ion-headphone icon_element"></span>	</div>	</div>
</div--> </ion-content> <!--ion-tabs class="tabs-icon-top tabs-positive"> <ion-tab title="Home" icon="ion-home" href="#/tab/home"> <ion-nav-view name="home-tab"></ion-nav-view> </ion-tab> </ion-tabs--> </ion-view> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Ionicons experiments - Script Codes CSS Codes

.icon-circle-bg { /* item styles */ /*border-color: #ddd; background-color: #fff; color: #444;*/ position: relative; /* z-index: 2;*/ display: block; margin: -1px; padding: 16px; /*border-width: 1px; border-style: solid;*/ font-size: 16px; -moz-border-radius:50%; -webkit-border-radius:50%;	border-radius: 50%;	width: 100px;	height: 100px; /* display: inline-block; display: block; color: lime; display: inline-block;*/ background: rgb(0, 161, 225); text-align:center; font-size:60px;
}
.icon-circle-bg i { color: #ffddff;
}
/*http://davidwalsh.name/css-circles*/
.bg-circle { -moz-border-radius:50%; -webkit-border-radius:50%;	border-radius: 50%;	width: 100px;	height: 100px; /*display: inline-block;*/	/* width and height can be anything, as long as they're equal */
}
.icon-circle, .icon-circle i { text-align:center; color:white;
}
.icon-circle i { margin: 0px auto; padding: 0px; display:block; /* position: absolute */ font-size:60px;
}
/*
.non-hover { display:block;position:absolute; }
*/
.on-hover { -moz-opacity: .0 ;
-khtml-opacity: .0;
filter:alpha(opacity=0);
opacity:.0;
position:absolute;
display: table;
margin:0;
}
}
.icon-circle:hover .non-hover { -moz-opacity: 1 ;
-khtml-opacity: 1;
filter:alpha(opacity=100);
opacity:1;
}
::selection {
background: #00a1e1;
color: #fff;
}
body {font-family: Roboto, Helvetica, Arial, sans-serif;}
.icon_outer_wrap {
height:80px;
width:80px;
display:inline-block;
padding:0px;
background:#6a6a6a;
position:relative;
overflow:hidden;
}
.icon_hover {
color:#FFFFFF;
background:#050505;
}
.icon_non_hover, .icon_hover {
text-align:center;
line-height:80px;
}
.icon_outer_wrap .icon_element {
font-size:49px;
color:#FFFFFF;
display:block;
}
#DIV_1 { color: rgb(25, 25, 25); display: inline-block; height: 80px; letter-spacing: 1px; position: relative; width: 80px; perspective-origin: 40px 40px; transform-origin: 40px 40px; background: rgb(0, 161, 225) none repeat scroll 0% 0% / auto padding-box border-box; border: 0px none rgb(25, 25, 25); border-radius: 10000px 10000px 10000px 10000px; font: normal normal 300 16px/30.8799991607666px Roboto, Helvetica, Arial, sans-serif; outline: rgb(25, 25, 25) none 0px; overflow: hidden; transition: all 0.3s ease-in 0s;
}/*#DIV_1*/
/* Icon Hovers
----------------------------------------------------------- */
.icon_outer_wrap, .icon_hover { -moz-border-radius:10000px; -webkit-border-radius:10000px; border-radius:10000px; -webkit-transition: all 300ms ease-in; -moz-transition: all 300ms ease-in; -o-transition: all 300ms ease-in; transition: all 300ms ease-in;
}
.icon_hover {
-moz-opacity: .0 ;
-khtml-opacity: .0;
filter:alpha(opacity=0);
opacity:.0;
height:100%;
width:100%;
position:absolute;
display: table;
margin:0;
}
.icon_outer_wrap:hover .icon_hover {
-moz-opacity: 1 ;
-khtml-opacity: 1;
filter:alpha(opacity=100);
opacity:1;
position:absolute;
}

Ionicons experiments - Script Codes JS Codes

angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('tabs', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html" }) .state('tabs.home', { url: "/home", views: { 'home-tab': { templateUrl: "templates/home.html", controller: 'HomeTabCtrl' } } }) .state('tabs.navstack', { url: "/navstack", views: { 'about-tab': { templateUrl: "templates/nav-stack.html" } } }) ; $urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope) { console.log('HomeTabCtrl');
});
Ionicons experiments - Script Codes
Ionicons experiments - Script Codes
Home Page Home
Developer Lizz
Username lizz
Uploaded August 18, 2022
Rating 3
Size 4,717 Kb
Views 50,600
Do you need developer help for Ionicons experiments?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lizz (lizz) Script Codes
Name
Ionic website - combine 2 column, docked side menu
Pretty nav colors
Bootstraptor
Super simple purecss.io yui landing page
SVG with links created from AngularJS and json
A Pen by lizz
Templating oitnb data
Teplok 1-pager responsive parallax
Super cute linkedin receipt
Just circular bg for ionicons
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!