I have spent the last 2 weeks or so googling and asking around..with nothing found.
I'm looking for a referenceable image library, like an icon library. My thoughts are, if there are enough default images...it could be as useful and quick to implement images as it is to currently implement icons.
For example, Google Material design icons are referenced like
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<i class="material-icons">
train
</i>
or IonIcon:
<link
href="https://unpkg.com/ionicons#4.1.2/dist/css/ionicons.min.css"
rel="stylesheet">
<i class="icon ion-md-heart"></i>
What I'm looking for is a image library like this. To allow for developers in my organization to link to default/stock images within their code with an icon tag. Like this:
<link
href="https://imagelibrary.com/here.min.css"
rel="stylesheet">
<i class="icon default-image1"></i>
I'm not a developer/coder, so perhaps there is something basic I'm missing, but this seems like a quicker way to link and change out default images rather than copying/finding a lengthy image url. (As long as the image file size is about the same as an icon.)
Thank you!
Related
I can't add Font Awesome icon on the popup. Please, help me to figure out how it works. I don't know how to add the icon and change the color in CSS.
Here is HTML
<i class="fas fa-check-circle">
Here is CSS:
.fa-check-circle {color: #ffffff;}
What's wrong?
It doesn't work. I can't see the icon on the popup.
Here is my pin
Fontawesome library not added. Add it
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
fontawesome start page
the problem is that you'r not using font-awesome CDN,CDN is a content delivery network which refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos
In your case the classes (fas fa-check-circle) you've used are written inside the font-awesome servers .to access them you should link your webpage .To do that use the below link
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-
B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
Another way to use the fontawsome icons is to download their entire icon library which will contain their scripts and classes and linking them to your page directly
Replace this -
<i class="fas fa-check-circle">
With
<i class="fa fa-check-circle">
Change the css with this:
.fas {
color: red;
}
It isn’t clear from your code if you’ve included font awesome into your page. Add this line (between the tags) to your page.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
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 want to use icons in my project, I add icons like this:
<a href="#">
<i class="icon-display4"></i>
<span class="visible-xs-inline-block position-right"> start</span>
</a>
And add I link them in <head>:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
But the icons don't show.
How can I fix this?
Make sure your icon actually exists. It looks like you're trying to use:
<i class="icon-user-tie">
But a search on the official website doesn't show this one as being an active icon.
You can add font awesome icons with example:
<i class="fa fa-plus"></i>
Here a list with all the icons from font awesome:
http://fontawesome.io/icons/
I can't understand the question, but I think this might be what you are looking for:
to add images, then use the tag, the syntax goes like this:
<img src="image location like https://i.imgur.com/HLXsgMd.jpg">
for linked images then put the image inside the a tag, like this:
<img src="image location">
to make a favicon (the icon that appears next to the page title) this should work:
Please do note that it has to be a .ico file see here.
<link rel="shortcut icon" href="image location">
If you Want To Use Icons In Your Page Then You Have to Use awesome icons
Go-to: http://fontawesome.io/icons/
First You Need To Add Font Awesome Css File On Your Page. then After You Can Used It any where in page.
Add This : <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
For example, I'm using this icon:
<i class="fa fa-pencil" aria-hidden="true"></i>
If by 'icons' you mean Bootstrap Glyphicons, I recommend visiting https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp, they also come predefined with bootstrap standard plugins e.g. glyphicons-halflings-regular files.
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 am trying to make a website based on the free HTML5up template
http://html5up.net/prologue
Anyone know how to get the Deviantart social icon? I tried adding the html code
fa fa-deviantart solo
but when I view it, the link is fine but the icon is in the shape of a can instead of the normal Deviantart icon. Please help? What am I doing wrong?
I am not sure if you have added the Font Awesome css inside your head tag or not.
With out that you can't get the icon you are looking for.
click here to download font awesome file. Or add this inside the head tag.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
below is the sample to add icons from font awesome collections.
<i class="fa fa-deviantart"></i> fa-deviantart
Please check this Font Awesome for more info.
The fa-deviantart is new in FontAwesome 4.1, and does not seem to be available in the template you're using. Try adding this line to your <head> tag:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
That should make the latest FA library available, and fa-deviantart worked when I tested it.