There is no message icon in bootstrap 3 - css

I use Bootstrap v3.1.1 (http://getbootstrap.com) and I want to use icon-message-* from the icons that is listed here , but there is no such classes in bootstrap. how should I use them?
I addedd this lines to head part:
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
and this is the code that I want to use... but there is no css class for "icon-message-new"
<span class="glyphicon icon-message-new"></span>

Hers is the message icon in Bootstrap:
<i class="glyphicon glyphicon-envelope"></i>
I will recommend to use Fontawesome
http://fontawesome.io/icons/
rather than Bootstraps's Glyph-icon . Font awesome has 479 icons free to use.

Bootstrap doesn't provide the full glyphicons. It has included just 200, and the one you refer to is not listed at the ones bootstrap supports (see the http://getbootstrap.com/components/#glyphicons link fo those details)
To get the complete glyphicons you want, grab them from Github. It's even listen on the page you linked us too.
https://github.com/marcoceppi/bootstrap-glyphicons

Related

Google Material Icons, Outlined, Rounded, Two-Tone, Sharp sets are not working

I'm trying to use the Material Icons font from Google Outlined set that just came out, but I can't figure it out. There is no information nor documentation.
Some icons are being displayed as filled and some as outlined.
eg: The account_circle icon from the Outlined set
How are you supposed to use the Outlined set? Any help is appreciated.
Update as of 2021
In short Google isn't (still) advertising the fact that you can load the different set via the Google API url on the Material Icons website. They are only, as per Google Material Icons instructions, talking about the default filled set which uses the following html tag to enqueue the Material Icons base stylesheet.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
If you want to use the Outlined, the Two Tone, Round or Sharp sets, you need to add the following to the Material Icons url.
Theme
URL parameters
CSS class
Filled (Default)
?family=Material+Icons
material-icons
Outlined
?family=Material+Icons+Outlined
material-icons-outlined
Two Tone
?family=Material+Icons+Two+Tone
material-icons-two-tone
Round
?family=Material+Icons+Round
material-icons-round
Sharp
?family=Material+Icons+Sharp
material-icons-sharp
Better performances
Like Google text-based font, Google Material Icons also accept the &display=swap url parameter.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">
You can learn more about &display=swap # https://developers.google.com/web/updates/2016/02/font-display
You can also specify a <link rel="preconnect" tag in the <head> of your document to improve load performances.
<link rel="preconnect" href="https://fonts.gstatic.com">
Example
<!--head-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone&display=swap" rel="stylesheet">
<!--body-->
<span class="material-icons-two-tone">
account_circle
</span>
<span class="material-icons-two-tone">
check_circle
</span>
<span class="material-icons-two-tone">
favorite
</span>
Update, with Answer:
Looking at the Readme in the source code, https://github.com/mui-org/material-ui/tree/master/packages/material-ui-icons
You Append Outline to the icon name. So for you:
import { AccountCircleOutline } from "#material-ui/icons";
or
import AccountCircleOutline from "#material-ui/icons/AccountCircleOutline";
I do believe this answers your question. A "correct answer" is always nice! Thanks!

Add FontAwesome icons to Glyphicon SVG

I am using bootstrap 3.3.7 and there are these 2 icons in FontAwesome which I need in Glyphicon:
fa fa-long-arrow-up
fa fa-long-arrow-down
Been trying several methods from StackOverFlow like icomoon but I cant understand as I dont have enough experience in CSS/font things. Can anyone help?
Simply add the following cdn into your header:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
Alternatively, you can use these bootstrap glyphicons:
glyphicon glyphicon-arrow-up //For the Up Arrow.
glyphicon glyphicon-arrow-down //for the Down Arrow.

Bootstrap glyphicon changes icon when I copy it on localhost

I use bootstrap to display a glyphicon icon, the online link works fine, when I copy the bootstrap.min.css locally, the icon is not working properly !!!
<link rel="stylesheet" href="bootstrap.css">
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
gives :
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
gives :
I want to keep the css locally to reduce loading time
Are you sure you referenced the right path for your local copy of Bootstrap? Your href is pointing to bootstrap.css.You are talking about bootstrap.min.css.
Check the developer to see if it recognizes bootstrap. That should provide some information.
I think the poroblem was bootstrap.min.css points to fonts/glyphicons-halflings-regular.woff2 , fonts/glyphicons-halflings-regular.woff and fonts/glyphicons-halflings-regular.ttf in the same path. so I have to copy them too :)
Thank you all
You have to download complete package's of bootstrap on this link http://getbootstrap.com/getting-started/#downloadand put into local-host folder
then you can link stylesheet like this
<link rel="stylesheet" href="http://127.0.0.1/xxxxxxx/css/bootstrap.min.css">
i think this may help you

Adding Icon/Icon Links

I was wondering how to add an Icon link to a webpage. I.e a picture of the twitter logo and once clicked it goes to your twitter page.
I'm specifically wondering how the logo is made like that, is it a custom image or what?
Thanks!
EDIT: Sorry to specify I mean I am wondering if there is a database of icons that you can use for links or if they are created by the person that designed the web, not how to link a picture.
I recommend Font Awesome icons. Yes, it's very simple to use them as a link. Simply embed the external CSS file into your HTML, and add the respective classes to your items. Try something like this for your twitter image:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- This embeds the Font Awesome icons -->
<i class="fa fa-twitter-square fa-3x"></i>

Bootstrap icon is not displaying

<span class="glyphicon glyphicon-calendar"></span>
This is my code. I wanted to add Date Icon but its not displaying . Its displaying some kind of default icon , something like rectangle with text EIo9 .I'm using latest bootstrap link
If you are adding this link to your page then, it should work.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
Make sure your assets directory location are correct? like css,images and fonts i.e.
All you need is bootstrap css file getting included in a right way.
You can take it from localhost or CDN so the code will be:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<span class="glyphicon glyphicon-calendar"></span>
Here's the working example. Good luck!

Resources