I have a PrimeFaces p:tree and I was able to add font awesome expanded and collapsed icons using this, but there is an arrow icon before that which is from PrimeFaces and I was not able to figure out how to switch it font awesome arrows (fa-arrow-circle-down and fa-arrow-circle-right), or changing the color to white also suffices my need.
I have looked at the Firebug and found that the PrimeFaces arrow is from an image url("/permitweb-1.0/faces/javax.faces.resource/images/ui-icons_616161_256x240.png?ln=primefaces-aristo") I am not sure I can change the color of the image without creating or importing a new image.
I looked at other posts here because PrimeFaces was using an image and FontAwesome is CSS, I am not sure how to replace the arrow, TreeNode doesn't have a setIcon method like MenuItem.
Here is my tree code:
<p:tree selectionMode="single">
<p:treeNode expandedIcon="fa fa-folder-open" collapsedIcon="fa fa-folder">
<h:outputText value="Home" />
</p:treeNode>
<p:treeNode type="document" icon="fa fa-file-text-o fileColor">
<h:outputText value="Staff" />
</p:treeNode>
</p:tree>
Tree arrow icon:
Try my FontAwesomeResourceHandler.
This resource handler will strip the jQuery UI icons from the community PrimeFaces themes and adds FontAwesome rules to
the theme. You can use it on existing applications without needing to convert all XHTML (for example ui-icon-gear to
fa fa-cog). The injected CSS will map all the UI icons.
Add this dependency to your pom.xml:
<dependency>
<groupId>com.github.jepsar</groupId>
<artifactId>primefaces-theme-jepsar</artifactId>
<version>0.9.1</version>
</dependency>
Then, in the faces-config.xml, add the handler:
<application>
<resource-handler>org.jepsar.primefaces.theme.jepsar.FontAwesomeResourceHandler</resource-handler>
</application>
Another way I tried was using the icons from another primefaces theme which has white icon arrows. This is just another way if you find the right color for your arrow icons in another theme. Otherwise I would go for Jasper's solution for a clean one for a custom image. Just posting this an another alternative.
I am using primefaces-aristo and found white arrow icons in primefaces-black-tie, so I override the arrow icons with that theme image.
.navTree > .ui-treenode-content > .ui-tree-toggler {
background-image: url("#{resource['primefaces-black-tie:images/ui-icons_ededed_256x240.png']}");
}
Related
I'm very new to web development just let you know.
I'm working on an app with reactJS and i'm trying to style a component I build.
ag-grid provides alot of icons and themes.
I'm trying to use a theme from ag-grid to style my component like this :
<div className='ag-theme-balham-dark'>
<button className="ag-icon-asc" />
</div>
both are calss that are provided in the css I imported but all I get is a black box (not an arrow - which I excpected)
does this approch for adding an icon makes scence?
I'm not sure whether the title is correct But I have a custom png file that I want to apply as an icon in an existing application. Because this is an existing application, I can't make too many changes in order to keep the consistency. The only thing that I have to do is by using icon tag.
<i class="icon name" />
I've tried to create a new class and set the background image.
.new-icon {
background-image: url("./img/icon.png")
}
After that I applied that class in an icon tag like
<i class="new-icon" />
But the image didn't show at all. What I should do?
You can use <img> tag for png files but if you want to create something that you use in <i> you should create your icons as a font file, I suggest you to use <img> tag.
You should design your icon as SVG, then you can make it web fonts from here: https://fontello.com/
You can not use png as an icon.
I use glyphicon icons in my project, I use bootstrap 3.0.0 .
I have problem to display glyphicon-option-vertical icon, it just not displaed!
Here how I use it:
<span class="glyphicon glyphicon-option-vertical"></span>
While all other icons displayed fine.Any idea why this specific icon is not displayed?
Probably it's not declared in your Bootstrap CSS file. You might need to download the latest bootstrap from GitHub. Here you can find the fonts files
https://github.com/twbs/bootstrap/tree/master/fonts
I am using JSF 2.0
I am able to add Background image to the JSF button but am not able to add icon to the button.
My Requirement is:- JSF button with Background image and a Icon
Following code am using to add background.
<!-- Discard button-->
<h:commandButton action="discard" style="background-image: url('..\\Images\\leftMenuActiveBg.png');width: 150px;height: 30px;color: white;border-color: white;font-size: 15px; " value="#{message.discard}">
<rich:componentControl target="popup" operation="show" />
</h:commandButton>
Can somebody help me in adding a icon to the button too please.
I am updating a image for better Explainanation as what I want to achieve and I what I have achieved till now with above code.
So you want a button with two background images? That's not possible on a single HTML element. The <h:commandButton> generates an single HTML <input type="submit"> element, while you basically need a <button type="submit" class="background"><span class="icon"> instead. You'd need to create a custom component which generates exactly that HTML, or to adopt a 3rd party component librarty which has such a component in its set, such as PrimeFaces. See also the <p:commandButton> showcase.
so I'm building a custom firefox extension and I got to the step where the toolbar is showing up and I put in buttons etc with css
If you look at feedly's button (Feedly is a firefox extension), there is this nice rectangular background behind the button of the extension that makes it look like a legitimate clickable button: http://imageshack.us/photo/my-images/196/feedly.png/
whereas default extension buttons have no background behind it....
how do you style a custom extension button such that it has a button-like background just like the feedly button?
The <toolbarbutton> element has an image attribute that allows you to specify an image:
<toolbarbutton image="chrome://.../icon.png" label="My button"/>
However, usually you want to set the image from CSS using the list-style-image property. For example if your XUL code looks like this:
<toolbarbutton id="myButton" label="My button"/>
You would have the following CSS code:
#myButton
{
list-style-image: url("chrome://.../icon.png");
}
More info: https://developer.mozilla.org/en/XUL_Tutorial/Adding_Labels_and_Images