Just circular bg for ionicons

Developer
Lizz
Size
3,312 Kb
Views
26,312
  1. Just circular bg for ionicons Previews
  2. Just circular bg for ionicons HTML Codes
  3. Just circular bg for ionicons CSS Codes
  4. Just circular bg for ionicons JS Codes

How do I make an just circular bg for ionicons?

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

Just circular bg for ionicons Previews
IQ Test

Just circular bg for ionicons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>just circular bg for ionicons</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"> <br>Following only uses 1 class: (built-in/copied some of the styling of item from ionic.css) <br> <a class="icon-circle"> <i class="ion-star"></i> </a> <a class="icon-circle icon-circle-outline"> <i class="ion-star"></i> </a> <a class="icon-circle-large"> <i class="ion-star"></i> </a> <a class="icon-circle-large icon-circle-outline"> <i class="ion-star"></i> </a> <a class="icon-circle-small"> <i class="ion-star"></i> </a> <a class="icon-circle-small icon-circle-outline"> <i class="ion-star"></i> </a> <br>Following uses the item class first to provide padding and stuffs: (item, item-calm) <div class="item item-calm item-icon-circle"> <i class="ion-ios7-star"></i> </div> <br> awkard cutting into top of circle <div class="item item-royal bg-circle-alt"> 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>
</p> </ion-content> </ion-view> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Just circular bg for ionicons - Script Codes CSS Codes

.icon-circle, .icon-circle-large, .icon-circle-small{ position: relative; display: inline-block; margin: -1px; /*padding: 16px;*/ width: 45px; /* 60*/	height: 45px; font-size:40px; -moz-border-radius:50%; -webkit-border-radius:50%;	border-radius: 50%; border: 1px solid #ebebeb; background: rgb(0, 161, 225); /*#ececec;ebebeb*/ color: #fff; text-align:center; /*vertical-align: middle;*/
}
.icon-circle-large { width: 100px; height: 100px; font-size: 64px; /* 64, originally 60 */ padding: 16px;
}
.icon-circle-small { width: 24px; height: 24px; font-size: 20px;
}
/*.icon-circle i, .icon-circle-small i, .icon-circle-large i { vertical-align: middle; }*/
.icon-circle-outline { border: 1px solid rgb(0, 161, 225); background: transparent; color: rgb(0, 161, 225); /*color: #8a6de9;*/
}
.icon-circle-outline i { }
/*icon-circle-bg and icon-circle and circle-bg*/
/*http://davidwalsh.name/css-circles*/
.item-icon-circle { -moz-border-radius:50%; -webkit-border-radius:50%;	border-radius: 50%;	width: 100px;	height: 100px; /* width and height can be anything, as long as they're equal */ text-align:center; color:white; /* font size here wont work */
}
.item-icon-circle i { /*text-align:center; color:white;*/ /*margin: 0px auto; padding: 0px; display:block;*/ font-size:60px;
}
body {font-family: Roboto, Helvetica, Arial, sans-serif;}
/* letter-spacing: 1px; overflow: hidden; perspective-origin: 40px 40px; transform-origin: 40px 40px; background: rgb(0, 161, 225) none repeat scroll 0% 0% / auto padding-box border-box;
*/
.bg-circle-alt { -moz-border-radius:50%; -webkit-border-radius:50%;	border-radius: 50%;	width: 100px;	height: 100px;
}

Just circular bg for ionicons - 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');
});
Just circular bg for ionicons - Script Codes
Just circular bg for ionicons - Script Codes
Home Page Home
Developer Lizz
Username lizz
Uploaded August 18, 2022
Rating 3
Size 3,312 Kb
Views 26,312
Do you need developer help for Just circular bg for ionicons?

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
Tinker v1 - delete later
Bootstraptor
A Pen by lizz
Subset of ionic documentation site
Ionic sharing data btw views
Fixed ionic bar with numbered steps
SVG Braille alphabet via JS
Pretty nav colors
Collection of random buttons
Ionic website - combine 2 column, docked side menu
Create amazing web content 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!