I have a project, I need to show the status of the project using icons. I have different status like new, open, in progress, completed, accepted.
Can anyone suggest best icons to show the above status of the projects.
Thanks in Advance.
There are two sets of mostly used Library available as per UI :
Material Icons :
Material Design Icons
Font awesome icons :
Font awesome version 4
Font awesome version 5
Few of those icons are available along with loading animation.
So if you choose Font awesome version 4 Icons :
then as per your sequence :
New - fa-plus-circle
Open - fa-folder-open
In Progress - fa-spinner
Completed - fa-check-square
Note : For Font-awesome version 4.7. assign above name to class along with suffics fa . And to change color of particular icon use icon class name (i.e. for above exapmle in case of New .fa .fa-plus-circle { css } )
Related
I haven't found this Icon's name in font awesome does anyone know it's name ??
I tried to search with Google Image but nothing ...
Thanks
This is not a font-awesome icon, the closest you have it's the map-signs one:
Check the cheatsheet at https://fontawesome.com/cheatsheet for all the icons.
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)?
While creating graphs using vis.js we can specify how the nodes can be displayed using the options.
var options = {
width: '400px',
height: '400px',
edges:{
style:'arrow'
},
nodes:{
shape:'icon'
}
};
by using 'icon' for style we use either bootstrap or fontawesome glyph icons. The documentation talks about using unicodes.
Created a Plunker and the Icons are not showing up.
http://plnkr.co/edit/DFYz26SOxGY9IvMqSuKm?p=preview
Not sure what i am doing wrong.
Thanks
I took a look at your plunker and I fixed it here:
http://plnkr.co/edit/NQarGkQSYeg3Cl0SdBGy?p=preview
I'm one of the devs of vis.js and I'd like to explain what went wrong here. First, you will need to include the css of fontawesome so vis knows where to find the glyphs. So we add:
< link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Second, going by your plunker, you set the shape of the nodes to 'circle'. That means the nodes will not care about the icon options. In your question you have set the node shape to 'icon'. This means, the node will use the additional icon options for configuring the icons.
So we added (to the global nodes options):
iconFontFace:'FontAwesome',
iconSize:50
Now for the unicode. You will need to specify which icon vis is supposed to show you. This is done by the icon option. So where do we find the unicode? Lets look at this example: http://fortawesome.github.io/Font-Awesome/icon/coffee/
and we find: fa-coffee · Unicode: f0f4 · Created: v3.0 · Categories: Web Application Icons
So the unicode is f0f4 and in javascript we write this as \uf0f4
From your problem I noticed there are no default settings for the icons, which will be fixed with the 4.0 release.
For further reference you can take a look at the docs: http://visjs.org/docs/network.html#Nodes_configuration
a working example with multiple icons from fontawesome and Ionicons:
http://visjs.org/examples/network/38_node_as_icon.html
To wrap up, next time you have an issue, please post it in our Github page, we try to collect all the questions there :)
https://github.com/almende/vis/issues
Good luck!
Previously (v0.5.2) core-icons/social-icons.html was defining:
post-facebook
post-twitter
post-gplus
This doesn't seem to be the case in v0.5.4 anymore.
Are there any other icons subject to removal?
Thanks,
F.
Yes. The open source material icons do not include the post-* icons, and 0.5.3/4 rebased on the open source set.