Ill start with what I've done thus far:
Re-downloaded fonts
switched to CDN for bootstrap css
declared font in custom css file that i use for all my styling
If i use the traditional span that works e.g
<span class="glyphicon glyphicon-ok"></span>
I can also see the like default icon the browser puts there
Code:
.box-cont li:before {
content:"\e013";
}
my website is ukhotspot.co.uk it is obvious what's going on hopefully
Your have to add the font-family to the selector:
.box-cont li::before {
content: "\e013";
font-family: "Glyphicons Halflings";
}
If you don't do this, the browser try to use a fallback font and there is no custom icon.
You can also add the class .glyphicon to every element but the first one should be the simpelst solution.
Related
I've got a stackblitz Angular 5 app for implementing table sorting here - https://stackblitz.com/edit/angular-rxdzom. It's based on the code from http://www.carbonatethis.com/sort-table-columns-with-angular-and-typescript/. It uses an ./app/sortable-table/sortable-column.component.css with the contents:
.caret-up:before {
content: "\f0d8";
}
.caret-down:before {
content: "\f0d7";
}
and an ./app/sortable-table/sortable-column.component.html that contains two i tags that reference these with the class attribute. Instead of showing the caret-up and caret-down, it substitutes a rectangular box. If I replace caret-up and caret-down with the Font Awesome library, "fa fa-caret-up" and "fa fa-caret-down", it works properly. My environment at work doesn't use Font Awesome and it's not an option to add it, so I need to create the css content manually as I'm attempting above. Any help is appreciated!
I've tried researching this on my own, and clearly have something that looks like it should work, it just doesn't. I've used references like http://webdesignerwall.com/tutorials/how-to-add-icon-fonts-to-any-element-with-css that seem to indicate the css is valid, and I've tried using ".caret-up i::before" which also does not work. I'm clearly missing something or doing something wrong. I even tried adding
padding-right: 10px;
font-family: "FontAwesome";
before the content property but that didn't help either.
I assume the css shown above is in your styles property of your component? If so, the issue is that the backspace needs to be escaped in your string. Update them to the following and you should be good!
.caret-up:before {
content: "\\f0d8";
}
.caret-down:before {
content: "\\f0d7";
}
An alternative for adding icons is through material icons
You can find the icons here : https://material.io/icons/
Include the following link in your index.html
And in the css add the class 'material-icons' to your property.
For example-
keyboard_arrow_up
You can refer to different symbols name on the above material icons link provided.
Okay, so a part of this was me being in the dark about our environment. We had updated font awesome to Semantic UI, which uses a port of the font awesome fonts so I just had to use those fonts. To do it manually, I could use:
.caret-up:after {
padding-right: 10px;
font-family: Icons;
content: "\f0d8";
}
.caret-down:after {
padding-right: 10px;
font-family: Icons;
content: "\f0d7";
}
and to put the icons after the text, I just needed to move the "ng-content" tag above the "i" tags for asc/desc sort order. So, using the Semantic UI fonts, my sortable-column.component.html became:
<ng-content></ng-content>
<i class="caret up icon" *ngIf="sortDirection === 'asc'"></i>
<i class="caret down icon" *ngIf="sortDirection === 'desc'"></i>
And it worked great. I forked my Stackblitz app at https://stackblitz.com/edit/angular-nfwe6j to show how this was accomplished in my environment using the Semantic UI 2.3.1 of the font awesome fonts.
I am using Social Buttons for Bootstrap to add social buttons on my web site. The file is basically a CSS, which is using Font Awesome and has around 20+ classes defined for various social networks.
Buttons, defined with Bootstrap Social have hover and active effects.
What I want to do is disable hover/active effect, so the buttons would become static, i.e. without any hover/click functionality.
Ideally, I'd like to have some CSS class, say "btn-static", which would cancel style changes coming from hover/active effects.
Is this even possible?
I would like to avoid creating separate CSS class for every social network, or modifying original CSS file. Hoping to add custom class which could cancel hover/active events.
For example, here is the button defined:
<span class="btn btn-social btn-facebook">
<span class="fa fa-facebook"></span>Facebook
</span>
I have tried using:
.btn-static:active, .btn-static:hover { background-color: none; }
and
.btn-static:active, .btn-static:hover { background-color: inherit; }
But that just makes the button have transparent background. I want it to keep original color. Is it somehow possible to reference the original color in CSS?
UPDATE #1: JSFiddler is available
This is a hack:
.btn-static {
pointer-events: none;
}
According to Can I Use, it is well supported. Take a look at the known issues tab on that page, as this won't scale to many other uses.
Ideally, use a more specific selector. For example:
#IDofYourFooter .btn:active, #IDofYourFooter .btn:hover, #IDofYourFooter .btn:focus {
background-color: [whatever] !important;
}
If you genuinely cannot come up with a more specific selector, then use !important to override CSS that is inline or coming from a third-party source that appears after your styles:
.btn:active, .btn:hover, .btn:focus {
background-color: [whatever] !important;
}
See that I added a :focus selector in there. Also, using !important almost always creates maintenance issues down the road.
Please note that changing styles does not disable links, it just obfuscates them. Make sure these do not live in an <a href…>, though if you do that you have no reason to write these styles. If the hover styles are applied outside of an <a href…>, then the original source did a poor job or there is script clickability added.
I'm trying to use font icons with the zurb foundation icon pack and while of course you can display them inline via of course something as simple as;
<i class="fi-alert"></i>
Except when I try to use it as css content (which is how they display them...) I don't get the same result when I do something like content: "\f101" inside of a css class. I just get those squares to display.
Is the only difference that I include them externally? via;
<link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=132456789blahblahblah" rel="stylesheet">
Or what? Am I just missing a src ref in my sass or something inane like that? I'm doing it just how I would expect it to work and have done with others in the past but I get no icon using them from the css, only shown inline with the html? I know it's going to be some dumb oversight so could use another pair of eyes.
Sorry, kicking the dust off my web experience, it's been awhile.
You need to set the font-family to the icon font in the same class where you set the content.
.icon:after{
font-family: "foundation-icons";
content: "\f101";
}
To use them in a css selector like that you have to actually install the font-family for your page and declare that font-family in your css selector before using the code.
This is a decent tutorial https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website
Please provide an example of code that works and doesn't work for you.
If you are trying to display icon by adding :content to an existing css element that is not part of icon pack, this will not work. For example this WILL NOT WORK:
HTML: <li class="icon">text </li>
CSS: .icon:before { content: "\f101"; }}
Use 'i' tag to add icons:
HTML: <li class="icon"><i class="fi-alert"></i>text </li>
Every time you see squares you need to check if font files are loaded. There are 4 fonts are used by icon set in case you want to load css on your server and link them manually:
/foundation-icons.eot
/foundation-icons.woff
/foundation-icons.ttf
/foundation-icons.svg
I have a Wordpress website and am trying to change the font size of the main menu. From Chrome, When I do an "inspect element" on the page I can see that the menu element is laid out thusly:
.blog-menu a {
font-size: 13px;
}
When I change the font-size to another value from within inspect element, the change is properly displayed on the page. However when I add the code:
.blog-menu a {
font-size: 25px;
}
to my style.css file, the change is not registered. Any thoughts as to what I'm doing wrong? Probably something stupid.
This can often be caused by styles being applied from your cache. To clear your cache and reload the page, pressing CMD/CTRL+Shift+R (Mac OSX and Windows, respectively).
If the new style is still not being applied, it's possible that another style is overriding it. This can be caused by a style being applied after your code, or before your code with the !important tag.
Some questions that may help you figure this out:
What does your environment look like? Is your style.css in a child theme's folder? Is another stylesheet being called after your style.css?
Updated as per comment conversation:
<style type="text/css">
.blog-menu a
{
font-size: 25px !important;
}
</style>
<div class="blog-menu">
<a>This should be 25px</a>
</div>
Bootstrap css uses the halflings from Glyphicons.
If I purchased their full product line, how would I incorporate that into the bootstrap framework?
Use this CSS sprite generator, uploading the zip file. It will create the relevant CSS classes for you (names are taken from images itself), merging all images in one (transparent) PNG one.
You could also use the Font Awesome solution.
Scalable vector graphics means icons look awesome at any size.
Designed from scratch to be fully backwards compatible with Twitter Bootstrap 2.0.
You would have to recalculate the background positioning of every glyph icon into your own class or overwrite the classes already set by the bootstrap in order to work them in. Twitter's bootstrap uses the halfling (free) version of the icons which are 14px all around, the full set is double the size so the old background-position's won't work.
Here is an example of what one of the bootstraps icon classes looks like:
/* class for the icon "fast-backward", notice the positioning values set in pixels */
.icon-fast-backward {
background-position: -216px -72px;
}
/* main class, defining what icon sheet to use */
[class^="icon-"], [class*=" icon-"] {
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
display: inline-block;
height: 14px;
line-height: 14px;
vertical-align: text-top;
width: 14px;
}
I have also created one on Github. Didn't see Marco's post above until after.
https://github.com/ekryski/bootstrap-template
From what I recall, Glyphicons doesn't provide their icons as a sprite version (many icons as one image), instead you get each icon separately. If you only plan on using a couple of their icons, this should be ok.
The best way would be to create a separate css file and continue on with their ".icon-" naming convention.
.icon-whatever {
background:url('..img/someicon.png') 0 0;
}
The default background position is 14px 14px so you need to reset it to 0 0 like I did above.
I've created a sprite and CSS drop-in for Bootstrap to provide this functionality. The repo and instructions are on Github. Not every icon has coverage yet, and some are still slightly off-center. To use the bigger icons just add the icon-large CSS class:
<i class="icon-large icon-search"></i>
There is a great article about Bootstrap Icons here: http://www.themplio.com/twitter-bootstrap-icons
No need to incorporate it. You can just add the glyphicons and use it alongside with the halflings bootstrap comes with.
Add the glyphicons (regular set) as follows:
/css/glyphicons.css
/fonts/glyphicons-regular.eot
/fonts/glyphicons-regular.svg
/fonts/glyphicons-regular.ttf
/fonts/glyphicons-regular.woff
/fonts/glyphicons-regular.woff2
You propably should give the base-css-class: .glyphicons the same style as bootstraps .glyphicon
.glyphicons {
position:relative;
top:2px;
display:inline-block;
font-family:'Glyphicons Regular';
font-style:normal;
font-weight:normal;
line-height:1;
vertical-align:top;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
Next, add the reference to the glyphicons into your page as follows:
<link href="/css/glyphicons.css" rel="stylesheet" />
Now, use the complete 'regular' glyphicons alongside with the halflings:
<!-- halflings / bootstrap 3 -->
<span class="glyphicon glyphicon-glass"></span>
<!-- Glyphicons Regular set (note the plural suffix!) -->
<span class="glyphicons glyphicons-glass"></span>
The other answers are fine but keep in mind the difference between icons with the font-technique and the older technique when using sprite-png's. Png's are not always scaleable and therefore comes with several sizes. Also, the color can not be set. To contrast with the background, the .white class can be used on png's to switch from black to white. By using fonts, style the icons as you would style a font:
.iconstyle { color: blue; font-size: 26px; etc.. }
You could use my soluce. Put this line after bootstrap link url css on your header.
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/opa-icons.css" rel="stylesheet">
Then to call online html code
<i class="icon-close icon-red"></i> Someting <!-- 16x16pix size color red -->
<i class="icon32 icon-close icon-blue"></i> Someting <!-- 32x32pix size color red -->
You could download here the assets (images-icons png and css both in zip) :
http://www.photonautes-associes.fr/utils/assets.zip
enjoy :)
Download fonts from official bootstrap page and then paste this code as is in your CSS file
Try This code
#font-face{
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');}
I thought I'd add my experience to the list here.
There were several obstacles for me when trying to add Glyphicons All to my existing, labyrinthine, Bootstrap-riddled codebase. (Among them, Glyphicons All uses the construction ".glyphicons .glyphicons-[name]" and Bootstrap uses the construction ".glyphicon .glyphicon-[name]").
I ultimately decided to just use them both, in parallel. Going forward, I find I'm using the Glyphicons All construction more and more, but the Bootstrap construction still works for all of my existing code.
Yes, including both "fonts" adds to the overall page weight, but not disastrously.
What I did was pretty simple and worked perfectly. NOTE: this is if you want those beautiful glyphicons working as fonts, as the bootstrap version I'm using does.
In the glyphicons zip, copy all the fonts in /glyphicons/web/bootstrap_example/fonts to where your bootstrap fonts are currently in your project
In the glyphicons zip, look at /web/bootstrap_example/css/glyphicons.css, copy and paste all into your own less/css file.
This step may be unnecessary as long as your own css/less file overwrites them properly: In your project's bootstrap.css file, remove #font-face stuff, .glyphicon styles, and all the glyphicon individual content tags (i.e, .glyphicon-xxxx:before { content: ... }).
In your less/css file with all the new tags, do a find and replace
".glyphicons-" replace with ".glyphicon-"
That should be it, unless I'm forgetting something simple. Works great for me.
Use glyphicons classess, example:
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
My favourite icon fonts is Fontello, you can download icons you need instead of whole package.