Angular app styling unicode characters - css

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.

Related

How to use a fontAwesome icon for the PrimeNg Tree's toggler?

I'm using FontAwesome in the app and I've not installed PrimeIcons.
So now when I'm using the PrimeNg's tree, I don't have any "chevron" displayed to open/close each item.
I cannot find a way in a documentation to override it(like a lot of their other component.
How can I replace their pi pi-fw pi-chevron-down by something like fa-solid fa-chevron-down(same for the chevron-left)?
I'm not sure how to target a CSS element to then apply another css on it?
Or did I miss a way of customizing this element?
(it's ok if it's in a global style)
Your .scss file, maybe could be better to set only related to involved components:
:host ::ng-deep {
.pi {
font-family: 'FontAwesome';
}
.pi-chevron-down:before {
content:"\f107"
}
}
in order to override other icons, please refer to fontawesome related cheatsheet

Dynamically resolve icon font code in a SCSS rule

I am using Nuxt.js (https://nuxtjs.org/), Vuetify.js (https://vuetifyjs.com/) and #mdi/font (https://materialdesignicons.com/) icon font.
I have a case where I want to use an icon, but not the normal way as I normally do in HTML, e.g.
<v-icon>
mdi-check
</v-icon>
but I want to use mdi-check in a SCSS rule (no icon-related html code), so I guess that what I need is dynamically resolving its content code, e.g.
&:before {
font-family: Material Design Icons;
content: 'here I need to dynamically access the code of the "mdi-check" icon, which is "\F012C"';
}
it is important to me not having to put the static code (\F012C), because it may change in the future, but I would like to find a way to dynamically resolve it.
Any idea?
Thanks
do like this.
<v-icon data-icon="\F012C">
mdi-check
</v-icon>
then in css
&:before {
font-family: Material Design Icons;
content: attr(data-icon);
}
Let me know if this does not work.
Thanks

Bootstrap glythicons not showing when hex code used

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.

Bootstrap bs-example

I copied CSS code for bs-example from the Bootstrap 3.0.3 docs site. I'm kind of a beginner with CSS, so if anyone could explain me this I would be thankful.
The following code:
/* Echo out a label for the example */
.bs-example:after {
content: "Example";
position: absolute;
top: 15px;
left: 15px;
font-size: 12px;
font-weight: bold;
color: #bbb;
text-transform: uppercase;
letter-spacing: 1px;
}
It works as expected,
but I would like the title, EXAMPLE, can be changeable. I would like to use a tag like let's say <zd></zd>.
Thanks in advance.
Prior to writing this answer, I didn't realise that editing Pseudo Elements (::after) with JavaScript was a little trickier. Although with this question/answer on StackOverflow made it relatively easy with JavaScript.
The concept was still the same, upon Page load the browser renders what is stated on the Style sheet, there after you must use JavaScript to manipulate it's contents to render something different.
Hence the CSS looks at the attr(data-content), which means it'll look for the data-content attribute within the HTML.
.bs-docs-example::after {
content: attr(data-content);
}
This looks for the data-content="":
<div class="bs-docs-example" data-content="Example Header">
Which renders:
To change it there after, all you have to do is change it's data-content attribute with JavaScript, in the demo I use jQuery to quickly select the DOM element and adjust it's data-content attribute.
$('.bs-docs-example').attr('data-content', "New Header Title" );
Demo Fiddle: http://jsfiddle.net/u2D4M/
If you wanted to do this without jQuery:
<script>
var getHeader = document.getElementById('bs-header');
getHeader.attributes["data-content"].value = "Hi, New Title";
</script>
Demo Fiddle: http://jsfiddle.net/9wxwxd4s/
The :after selector Insert content after every .bs-example class.
Here, the Word Example will be added after every .bs-example.
[please refer this link]http://www.w3schools.com/cssref/sel_after.asp
Instead of using content:"Example", you can edit your titles in html and assign the same class to all titles. header tags are preferred. ie., You should definitely create a new custom stylsheet and override the classes you want to modify. This is a way you can always go back to the default styling provide by bootstrap.
This is a simple and easy step followed by all web developers as per W3C std.
Still you want to change title by code, you can get help from jQuery or JS.
Tip from Christofer Eliasson: If you want to redesign your page, you can just exchange your custom stylesheet with a new one. Instead of getting a completely new bootstrap file to be able to start over. Also, if you just want to go back to the default styling on just a few elements, it would be a mess to remember what changes you have made. So, write your custom css code in a separate stylesheet.

bootstrap Glyphicons

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.

Resources