I'm working with Tutorial App of 2sxc ;"Tutorial Custom Icon Font and Picker",and using font awesome.
The icon picker shows lots of fonts but one particular one "fa-graduation-cap" is just not showing up
http://fontawesome.io/icon/graduation-cap/
I've looked into the fontawesome css file and its mentioned there, but in font picker search it just doesn't show up.
Can you help me guide to a particular file so it starts showing?
Thanks in advance
There seems to be a bug, after looking into FontAwesome CSS file if multiple classes are defined for an icon then the Icon Picker will only get the first css class.
Example in terms of Graduation Cap icon in the css it was listed as
.fa-mortar-board:before,
.fa-graduation-cap:before {
content: "\f19d";
}
Hence the icon picker was only listing the icon with Mortar Board name and skipping Graduation cap.
2sxc can you kindly fix this in your angular js code so search picks up all the class names?
Related
I wanted to know if there is any other type of marker that comes with react leaflet apart from the default blue one. Also without uploading any icon image, how can I customize the existing marker icon? I have already tried to refer many online sources but everywhere it consists of uploading your own marker icon which I would not like to do in my project. Any help would be highly appreciated, thanks!
There is also the CircleMarker and... that is it.
The Circle Marker offers some style customization though.
Then you have plenty plugins, not sure how to use them with React Leaflet. But it might be not too difficult given that you just need to specify an icon prop on the Marker.
React Font-Awesome
I trying to use it so many times but I can't only
example icon is working another icon is not working
I need some examples except the faCoffe example
please help...
I have a strange situation. I have a DNN instance with more than one portal running on it. I started up a new portal and when I add a 2sxc content app, the icons for the built in actions like add and edit are missing. However, the other portals in the DNN instance have the icons.
You can see the blue action buttons but no icons in the following image from the site:
I have checked the rendered html on both sites and the icon button contains the same html:
<div><i class="icon-sxc-pencil" aria-hidden="true"></i></div>
Removing aria-hidden="true" does not make the icon appear. I think that I must be missing an icon font on the site that is missing the icons, but I am not sure which one to use.
EDIT 1
I noticed that font-awesome was not being loaded so i added the following to the header of the site:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css?cdv=607" type="text/css" rel="stylesheet">
But the icons are still missing
Anyone have some thoughts on why this icon is missing?
thanks
I believe something is messing with the CSS which maps the icons to the buttons.
First just up-count the client-dependency number, my guess is it would fix everything.
Otherwise debug more using inspect-element to see how the other toolbars get their icon, and what is different with this instance.
fabricjs can change the font of a text in a canvas to a font family. For that the font needs to exist in the browser, either CSS or emb link.
I now want to add dynamically a font from a resource (google, self hosted ect) to the css populating it in the document via #font-face. I don't want to just list all fonts in the css beforehand because it can be a huge list. Is it possible to modify the running css in reactjs to add a font face to it?
Use CSS-in-JS solutions like emotion, styled component or radium
I'm following the Instructions here to incorporate the material design icons in my NW.js app. The problem is, all the icons show up as text. e.g. if I say
<md-icon aria-label="Menu" class="material-icons">menu</md-icon>
The above will show "menu" text in the button. Am I using it all wrong? How can I use the maetrial design icons in my project?