I use bootstrap-cosmo.css v3.3.7 and file contain glyphicon -glyphicon-duplicate
.glyphicon-duplicate:before {
content: "\e224";
}
but when I use it. It won't show up.
<a class="btn btn-danger btn-circle">
<i class="glyphicon glyphicon-duplicate"></i>
</a>
Any suggestion? I am using .NET ASP
Glyphicon like glyphicon glyphicon-remove works fine.
Check your stylesheets links and bootstrap load.
Here you can see it work fine.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Related
I am trying to change the glyphicon-chevron-up color when the button it is on is hovered on
The button:
.btn.btn-success.text-uppercase.m-b-xs.sort-button
The Glyphicon (this works if I hover on the Chevron):
.glyphicon-chevron-up:hover:before
I am trying
.btn.btn-success.text-uppercase.m-b-xs.sort-button:hover .glyphicon-chevron-up:hover:before {
color: orange !important;
}
but only works if I hover on the Chevron directly
Thanks in advance for assistance
Try this. It's working perfectly.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.btn:hover .glyphicon{
color: red;
}
</style>
</head>
<body>
<div class="container">
<h2>Chevron-left Glyph</h2>
<p>Chevron-left icon: <span class="glyphicon glyphicon-chevron-left"></span></p>
<p>Chevron-left icon as a link:
<a href="#">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
</p>
<p>Chevron-left icon on a button:
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-chevron-left"></span> Left
</button>
</p>
<p>Chevron-left icon on a styled link button:
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-left"></span> Left
</a>
</p>
</div>
</body>
</html>
Run it using the Run code snippet button below. Let me know it's working or not.
You can solve the issue this way.
.btn:hover .glyphicon{
color: red;
}
When you hover over the button the content colour inside the glypicon class will become red. You can use your desired colour.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.03.0/css/font-awesome.min.css">
</head>
<body>
<i class="fas fa-rupee-sign"></i>
</body>
</html>
This is not working
How can I use symbols from font awesome in my website online
just replace the link tag with this
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
and with this tag as icon tag
<i class="fa fa-inr" aria-hidden="true"></i>
If you look at the console, you'll see that you can't access this href link. Try this way:
<html>
<head>
<script src="https://use.fontawesome.com/29ecae9da7.js"></script>
</head>
<body>
<i class="fa fa-camera-retro fa-5x"></i>
</body>
</html>
Here you can find the icons: https://fontawesome.com/v4.7.0/icons/
I have written a simple code for a small drop down,
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="btn-group" _ngcontent-c9="" dropdown="">
<button class="btn btn-light" type="button" _ngcontent-c9="">Action</button>
<button class="btn btn-light dropdown-toggle dropdown-toggle-split" aria-expanded="false" type="button" data-toggle="dropdown" _ngcontent-c9="">
<span class="caret" _ngcontent-c9=""></span>
</button>
<ul class="dropdown-menu">
<li>abcd</li>
<li>efgh</li>
</ul>
</div>
the angular component:
https://angular-kayp63.stackblitz.io
It works if I put it in an individual HTML page, but it doesn't work if I put it in the Angular component I created. Why?
If you are using libraries from outsite you should import them in the main index.html file. Propably you importing bootstrap and jquery in wrong place. I did a stackBlitz, and your code works correctly.
https://stackblitz.com/edit/angular-aqvq1i
It the issue with your Import you are not importing external files globally.
Set these inside angular.json file like below of your project
"styles": [
//some other styles
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css",
],
"scripts": [
//some other scripts
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js",
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js",
],
Don't forgot to re-run ng-serve
I have multiple thumbs-up icons of font-awesome library on the screen. I want to toggle the color of the icon which is clicked.
How it can be done in AngularJS?
.liked{
color:#0000ff;
}
.not-liked{
color:#888;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="" ng-controller="">
<a href="#" ng-click="" class="not-liked">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>
Sorry, I have not written the AngularJS part (click method) because I am not aware with the Angular approach (though I have achieved it with jQuery).
You can simply use ng-click and ng-class directives.
.liked{
color:#0000ff;
}
.not-liked{
color:#888;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="" ng-controller="">
<a href="#" ng-class="{'not-liked':!liked,'liked':liked}" ng-click="liked=!liked">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>
Edit: removed extra ng-click.
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div>
This is a test page
<p>
<i class="material-icons">face</i>
<i class="large material-icons">face</i>
<i class="material-icons md-18">face</i>
<i class="material-icons dark">face</i>
</p>
</div>
</body>
I see all the icons are same, there is not style applied. Am I doing something wrong or is this not working?
Thanks,Rajesh
I got the answer, I have to use an external CSS, the Google Material Fonts don't have CSS styles
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<i class="blue-text text-darken-2 large material-icons ">invert_colors</i>
</p>
Thanks,
Rajesh