I'm working on a site that was built using ASP.NET MVC and Kendo UI. I'm trying to add a custom icon to a button that is displayed within the Kendo UI grid but I'm stuck.
Here's the code in the grid to set up the button:
command.Custom("copy")
.Text(" ")
.Click("copyNAddEvent")
.HtmlAttributes(new { #class = "copy", title = "Copy this event" });
Here's the CSS for that button:
.k-grid .k-button.copy{
min-width: 40px;
}
And here's the class in the FontAwesome CSS (which is included in the project) that I need:
fa fa-files-o
I'm not great with CSS, and it looks like when you use the Kendo classes, it creates a span with their icon in it. I like the FA icon better anyway, hoping someone can point me in the right direction.
Looks like you are using the MVC wrappers. In that case, what I do is use a column template.
The client template contains the relevant code - an anchor tag with bootstrap buttons and an <i/> for the fontawesome icon. I could add text like "Edit" to the right of this if desired.
Note that this is an edit button on a kendo grid so I include the class k-grid-edit on the anchor so that kendo will perform the edit action. There are other classes for the standard grid actions like k-grid-add, k-grid-delete, k-grid-excel, etc. For something custom you can use your own selector or add onclick to the anchor and remove the unneeded k-grid-edit.
.Columns(column =>
{
column.Template(t => { }).Title("Edit").Width(10)
.HtmlAttributes(new { style = "text-align: center;" })
.HeaderHtmlAttributes(new { style = "text-align:center;", title = "Edit" })
.ClientTemplate(#"<a class='btn btn-info btn-xs k-grid-edit' title='Edit this item.'><i class='fa fa-edit'></i></a>");
With this technique you will not see the Kendo default icons - just the fa.
You can set it by using the font awesome unicode provided for that icon and putting it in the after psuedo element, just like how font awesome puts their icons on elements. You can find the unicode when looking at the icon details. Here is the fa-files-o one: http://fontawesome.io/icon/files-o/
.k-grid .k-button.copy:after {
content: '\f0c5'
font-family: FontAwesome;
}
I agree with the answer above, just be sure you have the font awesome css file included in your markup.
Related
Using react-bootstrap-typeahead is it possible to change the contents of the Clear button?
I need to include a FontAwesome icon and "CLEAR" text to match a design.
Looking at the [RBT] Custom Aux Components demo I can see the ClearButton component, but I can't see how to customize this. I tried changing the label prop but this had no effect:
<ClearButton onClick={onClear} label="CLEAR" />
Is it possible to add:
label text
a FontAwesome icon
to the Clear button?
You can't customize ClearButton itself, but you can follow the example you linked to and use your own clear/close button component:
<Typeahead ... >
{({ onClear, selected }) => (
<div className="rbt-aux">
{!!selected.length && <MyCloseButton onClick={onClear} />}
</div>
)}
</Typeahead>
Note that ClearButton isn't really anything special; it just encapsulates the markup and classnames for Bootstrap's Close Button into a component. Feel free to use your own button!
I've added angular material to my project and after creating a custom theme I wanted to change the style of .mat-fab.
_theme.scss:
#use '~#angular/material' as mat;
#include mat.core();
$wb-nightblue: ( ... );
$wb-yellow: ( ... );
$wb-primary: mat.define-palette($wb-nightblue);
$wb-accent: mat.define-palette($wb-yellow, 500, 300, 800);
$wb-warn: mat.define-palette(mat.$red-palette);
$wb-theme: mat.define-dark-theme((color: (primary: $wb-primary, accent: $wb-accent, warn: $wb-warn)));
#include mat.all-component-themes($wb-theme);
.mat-fab {
border-radius: 3px;
}
styles.scss:
/* You can add global styles to this file, and also import other style files */
#import '_theme';
The mat-fab button still doesn't show my custom border-radius, however. Taking a look at the page with the dev-tools I can see that my css-rule exists, but it is overwritten by the default material style. Apparently, angular material adds four <style>-tags to the end of the HTML header, just after my stylesheet gets added by angular, which then overwrite my added style.
...
<link rel="stylesheet" href="styles.css">
<style>/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJhcHAuY29tcG9uZW50LnNjc3MifQ== */</style>
<style>.mat-button .mat-button-focu...</style> // contains a lot of angular material button related styles.
<style>.mat-icon{background-repeat:...</style> // contains some angular material icon related styles.
<style>/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJtYXAuY29tcG9uZW50LnNjc3MifQ== */</style>
</head>
Now this construct makes it of course pretty much impossible for me to overwrite default button styles without resorting to !important. I don't know what the sourceMappingURL styles are doing but I guessed they're responsible for the other two tags being added. I've tried to look for them in my project but couldn't find anything. Google wasn't any help either. If I just remove the styles in the html via developer tools, the buttons then lack the proper material style so they are required, but I'd like to have my styles.css placed at the end of the HTML head, so I can overwrite the parts I want.
I've also checked angular.json for any style entries but the only one is my styles.css, which isn't any surprise, since I'd have other stylesheet links in there instead of the direct <style>-tags.
Is there a way to get my stylesheet to the end of the head?
UPDATE
The reason the below does not work has nothing to do with Angular, but with CSS.
.mat-fab {
border-radius: 3px;
}
Basically, CSS applies styles according to how specific they are.
If you want a style to be applied over another one, you need to be more specific about it.
You can read more on this here.
Now onto possible solutions, which are three:
The important!:
A way to make your styles always apply over another is the use of the important! attribute.
This means that your style will only be overwritten by another style with an important! that is more specific that yours.
Given that Angular Material avoids important! there is little change that this happens. The solution would then be:
.mat-fab {
border-radius: 3px !important;
}
Being more specific with material styles:
Lots of people see the use of important! has an indicator that the CSS was poorly written. An alternative to this is simply being more specific with material on what styles we want to overwrite, like so:
.mat-button-base.mat-fab {
border-radius: 3px;
}
In this case we are using Material's own class to specific that we want to apply our style not just to the mat-fab but to a html element that contains both mat-fab and mat-button-base.
The mat-button-base class is a class that all buttons from Angular Material share.
Define your own class and combine it:
Similar to the previous sugestion, instead of using angular material, you can create your own class and combine it with the mat-fab like so:
.border-3.mat-fab {
border-radius: 3px;
}
And in the html you would have:
<button mat-fab class="border-3">
<mat-icon><!-- Icon here --></mat-icon>
</button>
This approach is clearer if somethings you will use the original material style and sometimes your own styling.
Keep in mind that in all cases, the styles need to be defined in a global style sheet.
According to the Official Documentation if you want to override the style of material component, you should create a file with all your custom styles, them pass it to the styles array of your angular.json.
The above describes how to find it:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app-name": {
...
"architect": {
"build": {
"options": {
...
// Add the file here.
"styles": [
// By default, Angular adds the material theme you choose and the src/style.scss file, see below
"./node_modules/#angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
}
}
}
}
}
}
The file you are edditing is related to theming (color palettes and what not).
An example of this is the src/style.scss file. This file is created by default to allow you to create css that will be applied to all HTML Elements and components.
With the above in mind, I would advise that you add your code in the src/style.scss file like below:
/* You can add global styles to this file, and also import other style files */
.mat-fab {
border-radius: 3px;
}
I am using font-awesome version 4.7.0 with Angular 5. When I add an icon to a screen the icon immediately changes from tag to and I cannot access its class from an Angular component which is what I want to do.
The resulting behavior is that the first icon defined is shown properly but any subsequent changes I make that should be reflected on the UI with a change of the font awesome icon are not shown at all.
The specific problem is that I wan the icons to change when sorting a table. The initial icon is set up to be fa-sort, and it displays correctly, but when clicking on the table header, the content gets sorted and updated but the icons dont change to fa-sort-up or fa-sort-down. I've tested the logic and it works properly.
The current HTML code which should be performing this action looks like this:
<i [ngClass]="sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' : 'icon-sort-down'"></i>
This is because fontawesome replaces your tag with . To change icons use this template (use in class that you need):
<span *ngIf="sortAsc"><i class="icon-sort-up"></i></span>
<span *ngIf="!sortAsc"><i class="icon-sort-down"></i></span>
Try maybe assigning the icon within the component code itself, such as:
in Component
getIcon(){
sortBy.key !== 'login' ? 'icon-sort' : sortBy.order === 'desc' ? 'icon-sort-up' :
'icon-sort-down'
}
I think it has to do with change detection, or you can manually trigger it after you sort, by importing change detection.
ex:
`constructor(cd: ChangeDetectorRef) {}`
and then in your code,
this.cd.detectChanges();
I have a problem with menu icons in PrimeFaces : the UI icon seems to be in conflict with the FontAwesome one.
Here is a screenshot:
When I look in my browser's inspector, I can see that four classes are applied to the div: ui-menuitem-icon, ui-icon, fa and fa-terminal.
Removing one or both of ui-menuitem-icon or ui-icon solves the problem. But, I would like to do it without some ugly script.
Here is how the menubar is displayed (please note that this line is in a layout (as a header)) :
<p:menubar model="#{menuGenerator.menu}" style="margin-bottom: 20px"></p:menubar>
My model is generated with the following method :
public MenuModel getMenu(){
MenuModel result = new DefaultMenuModel();
result.addElement(new DefaultMenuItem("SQL", "fa fa-terminal", "/"));
//...
result.generateUniqueIds();
return result;
}
The parameter primefaces.FONT_AWESOME is set to true.
I'm currently using Primefaces 5.0, and Mojarra 2.2.12.
How do I make the menu appear without the conflict between the UI icon and the FontAwesome one (e.g. with only one of the two classes ui-menuitem-icon, ui-icon applied to the div)?
This is a follow up question to this post: Font Awesome icons for Webix tree nodes
The above solution does not work well when "select: true" for the tree. Try it out in the demo here to see what I mean: http://webix.com/snippet/4e85a0ef.
#Aquatic, Could you please update the code with an example so that the Font Awesome icons can replace the 'standard' folder icon AND it works and looks as good as the standard icon in all cases, including when select = true for the tree?
Default styling has some rules for spans, which causes the issue. Just use a different tag for icon hosting. Like follows
webix.type(webix.ui.tree, {
name:"awesome",
folder:function(obj){
if (obj.$count)
return "<i class='webix_icon fa-folder'></i>";
return "<i class='webix_icon fa-file'></i>";
}
});
and
<style>
i.webix_icon{
color: #777;
line-height:27px;
}
</style>
http://webix.com/snippet/9a187ca6