How can I use Font Awesome in ui.bootstrap.rating?
I found out, that when I add state-on="'fa-star'" state-off="'fa-star-o'" to and changed class="glyphicon" to class="fa" in ui-bootstrap-tpls it works.
But I guess there is a more custom way to change the class of the icons.
Yeah as you are doing with setting state-off and state-on is their recommended manner. If you are going to have lots of the ratings on a page, I would just create a custom template and over-ride the stock template. Here is a post custom templates
I had Font Awesome and so didnt want to include Glyphicons.
uib.bootstrap Version: 1.3.3 - 2016-05-22 uses limited Glyphicons, so this is what i added to my css
.glyphicon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-star:before {
content: "\f005";
}
/**
copied from
.fa-star:before {
content: "\f005";
}
*/
.glyphicon-star-empty::before {
content: "\f006";
}
.glyphicon-chevron-right:before {
content: "\f054";
}
.glyphicon-chevron-left:before {
content: "\f053";
}
.glyphicon-chevron-up:before {
content: "\f077";
}
.glyphicon-chevron-down:before {
content: "\f078";
}
i.e. added css from Font Awesome 4.6.3 to appropriate glyphicon names
Now i dont know if this code will break on version of Font Awesome
Related
So I'm having an issue with Ace editor where certain autocompletions have doubled icons like so
I am creating a custom autocompleter like so:
const customCompleter = {
identifierRegexps: [/[a-zA-Z_0-9\.\$\-\u00A2-\uFFFF]/],
getCompletions: (
editor: Ace.Editor,
session: Ace.EditSession,
pos: Ace.Point,
prefix: string,
callback: Ace.CompleterCallback
): void => {
var completions: any[] = [];
completions.push({
value: "custom",
className: "iconable"
});
if (prefix == "custom.") {
RList = ["custom.Base64Decode",
"custom.AnotherMethod",
"custom.Method3",
"custom.TestingFunction"
];
RList.forEach(function (w) {
completions.push({
value: w,
className: "iconable"
});
});
}
callback(null, completions);
}
}
langTools.addCompleter(customCompleter);
So when I'm pushing to completions i add a className of "iconable". The CSS file then looks like this:
.ace_iconable:after {
font-family: "Font Awesome 5 Free";
content: "\f1b2";
display: inline-block;
padding-right: 10px;
padding-left: 10px;
vertical-align: middle;
font-weight: 900;
}
Not sure why this would be the case, but if anyone has run into this before please let me know!
Thanks
Looks like you can actually just change the css a touch.
You can use .ace_iconable:last-child:after and it will stop the icon being duplicated.
Looks like multiple spans are used when the autocomplete is picking up on a completion which starts halfway through a word. (E.g. User types "a", autocomplete suggests "bad")
This means that the icon would be displayed twice.
I'm building a responsive web app with Bootstrap 4. I want the font size of all text to be reduced on mobile devices compared to desktop, so I added the following to my base css file as per the Bootstrap documentation (https://getbootstrap.com/docs/4.0/content/typography/):
html {
font-size: 1rem;
}
#include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
#include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
#include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}
However the font size remains fixed. What am I doing wrong?
As of Bootstrap 4.3.1, there is now RFS (Responsive Font Sizing)! However, as explained in the docs, you must enable it using the $enable-responsive-font-sizes SASS variable.
RFS Demo: https://www.codeply.com/go/jr8RbeNf2M
Before Bootstrap 4.3.1, you'd can implement responsive text using SASS. However you need to specify the desired appropriate selector(s) for text that you want to resize...
#import "bootstrap/functions";
#import "bootstrap/variables";
#import "bootstrap/mixins";
html {
font-size: 1rem;
}
#include media-breakpoint-up(sm) {
html {
font-size: 1.1rem;
}
}
#include media-breakpoint-up(md) {
html {
font-size: 1.2rem;
}
}
#include media-breakpoint-up(lg) {
html {
font-size: 1.3rem;
}
}
#import "bootstrap";
Demo: https://www.codeply.com/go/5pZDWAvenE
This could also be done using CSS only (no SASS):
Demo: https://www.codeply.com/go/E1MVXqp21D
I think the easiest way is to use #media Queries. Suppose you want to change the font size responsively for a content with class "class-name" or even for entire html tag, just add your media queries to end of your css file or any place inside it.
Sample code:
/*
####################################################
M E D I A Q U E R I E S
####################################################
*/
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/* Small devices (landscape phones, 544px and up) */
#media (min-width: 544px) {
.class-name {font-size: 16px;}
}
/* Medium devices (tablets, 768px and up) */
#media (min-width: 768px) {
.class-name {font-size: 30px;}
}
/* Large devices (desktops, 992px and up) */
#media (min-width: 992px) {
.class-name {font-size: 40px;}
}
/* Extra large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
.class-name {font-size: 48px;}
}
more information can be found here
This is a Sass feature.
To have access to the media-breakpoint mixins and the size variables, you need to:
add a custom.scss file
#import "node_modules/bootstrap/scss/bootstrap";
and setup a Sass compiler
https://getbootstrap.com/docs/4.0/getting-started/theming/
Not a complete answer, but a good starting point is to enable responsive font sizes in v.4.5
$enable-responsive-font-sizes: true;
#import "../../../node_modules/bootstrap/scss/bootstrap";
Here is an alternative approach with loop
#import "bootstrap/functions";
#import "bootstrap/variables";
#import "bootstrap/mixins";
$font-sizes: (
html: ( xs: 1rem, sm: 1.2rem, md: 1.3rem),
);
#each $breakpoint in map-keys($grid-breakpoints) {
#include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
#each $name, $values in $font-sizes {
#each $n, $value in $values {
#if($infix == "-#{$n}" or ($infix == "" and $n == 'xs')) {
#{$name} { font-size: $value; }
}
}
}
}
}
I need to customize an Ext.panel.Tool to display the icon 'fa fa-file-excel-o' from font awesome in the header of a grid. Following what I found online I have declared the tool:
header: {
itemPosition: 1, // after title before collapse tool
items: [{
xtype: 'tool',
type: 'export',
cls:'component-tool-export',
handler: 'doExportData'
}]
},
And the css:
.component-tool-export .x-tool-export{
background-image:none !important;
content: "\f1c3" !important;
}
The tool is there and I can click on it, but the icon is not displayed. Can anyone give me some hint to fix this?
You are not adding content to the :before pseudo element, which is required to have the content displayed. You could use the following CSS:
.component-tool-export .x-tool-export{
background-image:none !important;
font: 16px/1 FontAwesome;
}
.component-tool-export .x-tool-export:before{
content: "\f1c3" !important;
}
But if you already use Sencha CMD, I would recommend to conform with Sencha's own SASS files and make use of the full feature set of Sencha Fashion:
$tool-export-glyph: dynamic($fa-var-file-excel-o $tool-glyph-font-size $font-icon-font-family);
.#{$prefix}tool-export {
#include font-icon($tool-export-glyph);
background: none;
}
I just added FontAwesome to my ExtJS application.
I added a Glyph to my tab:
items: [
{
title: 'Dashboard',
glyph: 0xf009,
padding: '5',
I would like to change the Glyph color, is that possible?
This should work:
.x-panel-header .x-panel-header-glyph {
opacity: 1;
color: red;
}
You can see it in action here: http://extjs.eu/examples/#complex-data-binding
I tried the Saki way
.x-panel-header .x-panel-header-glyph {
opacity: 1;
color: red; }
but then you don't have the control to change attributes for specific glyph and if I want to set it for individual glyph I will need to work harder.
I use a simple way:
Step 1: add a link to the css file
link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
Step: 2:
use iconCls
iconCls: "fa fa-lg fa-futbol-o glyph"
here I used the awesome classes "fa fa-lg-fa-futbol-o" but I added "glyph" so it will looks better than without.
Step 3:
define "glyph" in your css file.
.glyph { margin-top: 3px; }
Step 4:
define any css you can apply to the glyph like color.
The result:
in css file:
.glyph { margin-top: 3px; }
.youname { color: #15498B; }
in js ( every where you have config iconCls )
iconCls: "fa fa-lg fa-futbol-o glyph youname"
I know this is a little late but for anyone else in the future who wants change Glyph icons when using custom fonts with Exts.
I used the reference to the button in my controller passed in during the event. I then got the buttons ID then target the button using the get method and concatenating "-btnIconEl" to the the button ID as any glyph/icon will have that CSS.
'button[action=displayGrids]' : {
click: function(button) {
Ext.get(button.id + '-btnIconEl').setStyle('color', '#ffffff');
}
}
I want to either make a link in Extjs or make a button look like a link and on hover you see the button. They do this in the docs with Code Editor button and the Live Preview button.
If they do this using CSS, what CSS do I use and when/how to I apply it?
I recently wanted a LinkButton component. I tried to find a pre-existing component without any luck, so I ended up writing one from scratch. Its implementation is almost entirely CSS-based.
/******************************************************************************/
/*** LINK BUTTON CSS **********************************************************/
/******************************************************************************/
a.ux-linkbutton {
background-image: none;
border: 0px none;
margin-top: 1px;
}
a.ux-linkbutton.x-btn-default-small-focus {
background-color: inherit;
}
a.ux-linkbutton * {
font-size: inherit !important;
}
a.ux-linkbutton:hover {
text-decoration: underline;
background-color: inherit;
}
/******************************************************************************/
/*** LINK BUTTON JS ***********************************************************/
/******************************************************************************/
Ext.define( "Ext.ux.button.LinkButton", {
extend: "Ext.button.Button",
alias: "widget.linkbutton",
cls: "ux-linkbutton",
initComponent: function() {
this.callParent();
this.on( "click", this.uxClick, this, { priority: 999 } );
},
// This function is going to be used to customize
// the behaviour of the button and click event especially as it relates to
// its behaviour as a link and as a button and how these aspects of its
// functionality can potentially conflict.
uxClick: function() {
//Ext.EventObject.preventDefault();
//Ext.EventObject.stopEvent();
//Ext.EventObject.stopPropagation();
//return false;
}
} );
The click handler is a work-in-progress.
The class does have one minor issue: a pseudo-class style is applied after clicking/focusing that I have not been able to remove. If someone fixes it before I do, please, post the CSS for it.
With Ext 4.0.7 I had managed to do the following:
View:
...
{
xtype: 'button'
,text: 'Discard changes'
,action: 'cancel'
,cls: 'secondary-action-btn'
}
CSS:
....
.secondary-action-btn {
border: none;
background: none;
}
.secondary-action-btn span {
cursor: pointer;
text-decoration: underline;
}
I recall there is an extension called linkButton. You can refer to the extjs forum here