I am trying to implement a date time picker in my C# MVC view, but the calender icon to the right of my input box doesn't appear.
I am following the example from here.
Part of my view
<script src="/Scripts/angular-0.10.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="/Content/bootstrap/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="/Content/bootstrap/css/bootstrap-responsive.min.css" >
<script src="/Scripts/jquery-lib/jquery-1.10.2.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script data-main="/Scripts/main" src="~/Scripts/require.min.js"></script>
<div id="datetimepicker2" class="input-append">
<input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"/>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
I have tried explicitly stating the path of the glyphicons icon like the following which did not work:
#iconSpritePath: "/Content/bootsrap/img/glyphicons-halflings.png";
I end up getting this error:
The name 'iconSpritePath' does not exist
I also noticed that my Twitter bootsrap 3 class does not include the icon-calender class.
How to make calender icon appear?
From the official bootstrap documentation:
With the launch of Bootstrap 3, icons have been moved to a separate repository. This keeps the primary project as lean as possible, makes it easier for folks to swap icon libraries, and makes Glyphicons icon fonts more readily available to more people outside Bootstrap.
This is how you use it. The instructions are here: http://glyphicons.getbootstrap.com/
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css" rel="stylesheet">
<span class="glyphicon glyphicon-calendar"></span>
Related
I'm trying to use font awesome on my site and it's not working properly. I was sent an email and told to just paste the element in my site's header. This is the element.
<script src="https://use.fontawesome.com/b219f80601.js"></script>
I did all that but it's not working and displays as shown in the image. When I try my older code from a different account it uses kit instead of use and renders properly.
<script src="https://kit.fontawesome.com/[redacted].js" crossorigin="anonymous"></script>
The icon I tried to use was fas fas user
<i class="fas fa-user"></i>
What might be happening here? Also, font-awesome did not add the crossorigin attribute to the newer tag.
A note: I'm also using bootstrap 5.
This is my header:
<head>
<script src="https://use.fontawesome.com/b219f80601.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/b219f80601.css" media="all">
<title></title><link rel="stylesheet" href="/stylesheets/main.css"><link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
And this is the script tag for bootstrap at the end of the body tag:
<body>
...
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
Note 2:
The embed codes I make and edit can only go up to v4.7.0.
It looks like your JS link does not actually provide the CSS required to render the icon. You need to include at least the base and solid icon set CSS.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/fontawesome.min.css" integrity="sha512-P9vJUXK+LyvAzj8otTOKzdfF1F3UYVl13+F8Fof8/2QNb8Twd6Vb+VD52I7+87tex9UXxnzPgWA3rH96RExA7A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/solid.min.css" integrity="sha512-tk4nGrLxft4l30r9ETuejLU0a3d7LwMzj0eXjzc16JQj+5U1IeVoCuGLObRDc3+eQMUcEQY1RIDPGvuA7SNQ2w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://use.fontawesome.com/b219f80601.js"></script>
<i class="fas fa-user"></i>
Also, upon review of the CSS tag you have in your header, I think you may be trying to use FAv5 JS with FAv4 CSS.
It was an accounts issue. The account hadn't been confirmed but emails with embed codes had been sent regardless.
The emails sent me to this address and that seems to be a limited panel that allows you to create font-awesome 4 kits. This is the UI:
Once the account had been registered I was able to log into the site and access font-awesome 5 regularly and create new kits. These links start with kit instead of use
I am trying to use bulma icons following the docs here, but the icon doesn't show up:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div>
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>ICON</span>
</div>
Also see the fiddle here, what could be the problem?
You also need to include the bulma.min.css file, not just the .map.
Edit
Per the Bulma docs:
If you want to use icons with Bulma, don't forget to include Font Awesome:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Update 3/19/2019
As #Akshay has pointed out below, the documentation has changed and the proper way to include Font Awesome is now
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
Bulma icons won't show up unless you call fontawesome libraries, we can use a kit code for that. This will look like <script src="https://kit.fontawesome.com/xxxxxxxx.js"></script> in the <head>...</head> section of your code.
note: you can get the code "xxxxxxxx" for free usage of fontawesome icons from the website.
https://fontawesome.com/start
I am using arrow up glyph-icon using Bootstrap. when i applied downloaded css in HTML it is not working, but if used full HTTP css path in online it works.below is my code, tell me where is wrong in my code,is it browser version is dependent? if I used https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css. this complete path it works.but I need to add offline.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<body>
<div class="w3-container">
<button class="w3-button w3-xlarge w3-circle w3-red w3-card-4"> <span class="glyphicon"></span></button>
</div>
</body>
</html>
Replace this
<span class="glyphicon"></span>
with
<span class="glyphicon glyphicon-arrow-up"></span>
More information :
https://getbootstrap.com/docs/3.3/components/
Got it! Well, at least if you use the µBlock plug-in in your browser.
For me it worked when checking the "Ignore generic cosmetic filter"-option (or whatever it is called in English) on the "Prepared Filters"-page (or whatever it is called in English).
I tried to figure out where the source of this feature is located to see how that cosmetic filter works, but couldn't find it. I mean there might be a way to work around that cosmetic filter if the element with the glyphicon would be coded differently.
Why are these useful gliphicons pixelated, even on W3Schools own website? I am trying to use these and have the same issues. See glyphicon-search as an example.
I have tried rotating, antialiasing, etc. Nothing works.
If it displays like this on W3Schools own website - is that a "feature"? Should I be using some other small icons? Here is an example - the right one is a real problem:
There is nothing to do with this w3cschool glypican:
Some another issues are also be there for this problem, like,
Use Proper CDN instead of using local file (js or css)
Wrong Loading of glyphican as #Deathstorm explain the second point in his answer.
You can see this demo which I have copied from w3cschool itself and it's supported in most of the browser:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<div class="container">
<h2>Music Glyph</h2>
<p>Music icon: <span class="glyphicon glyphicon-music"></span></p>
<p>Music icon as a link:
<a href="#">
<span class="glyphicon glyphicon-music"></span>
</a>
</p>
<p>Music icon on a button:
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-music"></span> Music
</button>
</p>
<p>Music icon on a styled link button:
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-music"></span> Music
</a>
</p>
</div>
</body>
</html>
Why are W3Schools glyphicons pixelated?
It has nothing to do with W3Schools and the title should change (I think). Use your developer tools to see that the provided link downloads sources from a CDN:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2
and not from W3Schools.
So, any comments like: glyphicons from w3schools are terrible. Or at least more pixelated than others... are terribly wrong and misleading. As others have mentioned, maybe there is something else that causes this (graphics card driver, browser settings, monitor settings). Have you checked different devices?
With my PC, I also see difference between Firefox and Chrome. The result of Chrome looks smoother:
also: Vector Icons Roundup | A side-by-side comparison between popular icon fonts
as more people told already, the glyphicons from w3schools are terrible. Or atleast more pixelated then others.
Some problems that could let this problem occur are:
The browser version and/or cache
Wrong loading of the glyphicons. You can check this by viewing the console in your browser.
A bad source from wich the glyphicons are taken from.
The source i've always used and didn't have any problems with is the glyphicons from bootstrap You can use these glyphicons by adding the following code to your header:
<!-- Fonts and Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
Note: By now there maybe will be newer versions, you can find the scripts here
a example code of loading a glyphicon the right way is down below:
<i class="fa fa-facebook-square" aria-hidden="true"></i>
Try using the glyphicons directly from bootstrap! Here is the bootstrap glyphicon "how to use" page: http://getbootstrap.com/components/#glyphicons-how-to-use
The gliphicon reference page is right above it.
If this does not solve the problem I would suggest fontawesome. I know fontawesome is not a gliphicon source, but it is very helpful.
Here is a link to font awesome's page:
http://fontawesome.io/
I hope this solves the problem!
I am not familiar with w3schools (because it is a terrible resource, would recommend using https://developer.mozilla.org/en-US/).
What I am guessing is that those are images. Their code must be pulling from a library of little images. This would greatly slow the loading of your DOM and I would recommend finding a different resource to get those icons!
Enter SVG's
SVG's are scalable vector graphics. They are two-dimensional graphics that will never pixilate, they are also toggleable with classes and pseudo-classes. Font-Awesome is a fantastic resource for these icons, would go so far as to say bookmark it!!
Regarding the particular "glyph" you pointed out as being pixelated. Here's font-awesome's version!
http://fontawesome.io/icon/info-circle/
All you need is the embedded code they email you or you can download their hold library (would not recommend).
Hope this helps!
I want to know how I can use Material UI in my html project. I want know whether I can implement code from material UI's git page
From what I have understood and read from the web and your question is that no, unfortunately it is mainly based for javascript and it's frameworks and so on. You could, which I am assuming is not what you would want to do, is you could incorporate react within your html by plugging a cdn then writing your react code in another script tag. But, I have found a possible solution, even though it isn't Material UI, it's somewhat close:
https://getmdl.io/
This is material design light. For example, to create a button just add the cdn and style sources:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
Then add your button like so:
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
Hope this helps.
Sorry for the almost 4 year delay.
Copy-paste the stylesheet into your before all other stylesheets to load our CSS.
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design#4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://unpkg.com/popper.js#1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-material-design#4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
<script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>
First you need to install Material ui using NPM
npm install
Install with Bower
You can also install and manage Material Bootstrap using Bower
bower install bootstrap-material-design
here is link for instruction giving how to use material ui in html
https://fezvrasta.github.io/bootstrap-material-design/#getting-started
you will need to add
material.css and ripple.css file
for js file
material.js
material.min.js and ripples.min.js