How can i use glyphicons with JSF(Netbeans: Maven/web application+JSF Framework)? I want to use a glyphicon with a <h:link>.
Here is how I did it in regular HTML:
<li><span class="glyphicon glyphicon-home"></span> Home</li>
Here is how that looked like:
Here is how I tried to do it in JSF:
<li><h:link id="bone" value="Home" outcome="book" /><span class="glyphicon glyphicon-plane"></span></li>
Here is how it looked like:
As you can see, the glyphicon which is black and a little hard to see in that darkblue background color, is located down there. How do I make it to look like the HTML version but in JSF?
Ps, the "home button" is part of a navigation bar.
Thanks.
When you use this code:
<h:link id="bone" value="Home" outcome="book" />
<span class="glyphicon glyphicon-plane"></span>
Your generated HTML code will be:
<span class="glyphicon glyphicon-home"></span> Home
Try like this:
<li>
<h:link id="bone" outcome="book">
<span class="glyphicon glyphicon-plane"></span>Home
</h:link>
</li>
In short: the order you place the JSF code matters.
Related
I would like to dynamically generate a class name for my element. For example,
<span class=``icon icon-${route.title}``></span> (had to use double backticks here, but it should really be just one set of backticks.)
<ul class="sidebar-list">
<li *ngFor="let route of menuRoutes.items">
<span class=`icon icon-${route.title}`></span>
<a routerLink="/{{route.path}}" routerLinkActive="active">{{ 'menu.' + route.title | translate}}</a>
</li>
</ul>
Try this:
<span class="icon icon-{{route.title}}"></span>
You can also archive this by using a [ngClass] directive
<span [ngClass]="['icon', route.title]"></span>
Im trying to add a glyphicon to the left of a link in a dropdown menu, but cant seem to figure it out. This is what my code looks like:
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">options
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><i class="glyphicon glyphicon-flag"></i><%=link_to "report link", report_path(report: {reportable_id: post.id, reportable_type: "Post"}), id: "report_#{post.class}_#{post.id}", class: "report_link", remote: true, method: :post %></li>
Can someone please explain to me how to do this?
Thanks!
Simply put the icon inside the link - there's no visual downside to doing so, and even potentially improves UX (you can click on the icon too).
<li><i class="glyphicon glyphicon-flag"></i> link</li>
See this bootply
So your new ruby link would look like
<%=link_to "<i class='glyphicon glyphicon-flag'></i> report link".html_safe, report_path(report: {reportable_id: post.id, reportable_type: "Post"}), id: "report_#{post.class}_#{post.id}", class: "report_link", remote: true, method: :post %>
(Apologies if this is wrong, I don't actually know Ruby. I assume this was a css positioning error, but if the Ruby is wrong too let me know and I shall delete this answer)
Try using a span outside of your link_to. You would remove the display text ("report link") after the link_to and add it back after the Glyphicon span class ends.
<li>
<%=link_to report_path(report: {reportable_id: post.id, reportable_type: "Post"}), id: "report_#{post.class}_#{post.id}", class: "report_link", remote: true, method: :post do %>
<span class="glyphicon glyphicon-flag"></span> Report Link
<% end %>
</li>
I guess my problem is easily solved, but I'm thinking for days about it, googling didn't help me out. Maybe I just don't understand the concept :-).
In my provider extension I define a simple main page with one configuration option. Depending on what "fontawesomeicon" says for a page, its corresponding Fonteawesome-Icon shall be placed before the menu entry text.
But when I implement it this way, every page menu entry gets the Icon from the actual page. I don't know how to tell the system, that the corresponding {fontawesomeicon} shall be taken from that page this entry belongs to.
Thanks for any hints to get it working. I'm useing Typo3 7.1
Page config Fullpage.html:
<f:section name="Configuration">
<flux:form id="fullpage" />
<flux:grid>
<flux:grid.row>
<flux:grid.column colPos="0" name="main" />
</flux:grid.row>
</flux:grid>
<flux:field.input name="fontawesomeicon" />
</f:section>
Partial config Elements.html:
<f:section name="MainMenu">
<ul class="sf-menu">
<v:page.menu pageUid="{settings.startpageUid}" entryLevel="2" levels="2" expandAll="TRUE" as="menu">
<f:for each="{menu}" as="item">
<li class="{item.class}">
<i class="fa fa-lg {fontawesomeicon}"></i> {item.linktext}
<f:if condition="{item.hasSubPages}">
<ul>
<f:render section="SubMenu" arguments="{_all}" />
</ul>
</f:if>
</li>
</f:for>
</v:page.menu>
</ul>
</f:section>
<f:section name="SubMenu">
<v:page.menu pageUid="{item.uid}" entryLevel="2" levels="1" as="submenu">
<f:for each="{submenu}" as="subitem">
<li class="{subitem.class}">
<i class="fa {fontawesomeicon}"></i> {subitem.linktext}
</li>
</f:for>
</v:page.menu>
</f:section>
Just to complete it... putting it together in the page layout file Page.html:
<f:layout name="Page" />
<f:render section="MainMenu" partial="Elements" arguments="{_all}" />
<f:render section="Main" />
Finally got it. It's the old problem... how do you ask the right question if you don't get to the real matter. Another post (about accessing flexform) gave me the final hint. Yay!
<f:section name="MainMenu">
<ul class="sf-menu">
<v:page.menu pageUid="{settings.startpageUid}" entryLevel="2" levels="2" expandAll="TRUE" as="menu">
<f:for each="{menu}" as="item">
<li class="{item.class}">
<!--new:--> <flux:form.data table="pages" field="tx_fed_page_flexform" uid="{item.uid}" as="menuIcon">
<i class="fa fa-lg {menuIcon.fontawesomeicon}"></i> {item.linktext}
<!--new:--> </flux:form.data>
<f:if condition="{item.hasSubPages}">
<ul>
<f:render section="SubMenu" arguments="{_all}" />
</ul>
</f:if>
</li>
</f:for>
</v:page.menu>
</ul>
</f:section>
<f:section name="SubMenu">
<v:page.menu pageUid="{item.uid}" entryLevel="2" levels="1" as="submenu">
<f:for each="{submenu}" as="subitem">
<li class="{subitem.class}">
<!--new:--> <flux:form.data table="pages" field="tx_fed_page_flexform" uid="{subitem.uid}" as="subMenuIcon">
<i class="fa {subMenuIcon.fontawesomeicon}"></i> {subitem.linktext}
<!--new:--> </flux:form.data>
</li>
</f:for>
</v:page.menu>
</f:section>
By using the variable "fontawesomeicon" directly, the value is always the same, as set in the controller that renders the template, you need to specify a new context.
Debug the variables in the foreach-loop with <f:debug>{varname}</f:debug> and check if the field "fontawesomeicon" is present.
<f:section name="SubMenu">
<v:page.menu pageUid="{item.uid}" entryLevel="2" levels="1" as="submenu">
<f:for each="{submenu}" as="subitem">
<li class="{subitem.class}">
<f:debug>{subitem}</f:debug>
<i class="fa {fontawesomeicon}"></i> {subitem.linktext}
</li>
</f:for>
</v:page.menu>
</f:section>
I also recommend to use TypoScript (HMENU, TMENU) for menus instead of Fluid-Templates
In the application I am working on, we can add the following markup for the pictured result
<span class="cell-inner-undefined">
<span title='Not defined' class="status pl-undefined" ></span>
</span>
Inside the relevant CSS we have the following:
.pl-undefined:before {
content: "";
color:#969696;
}
The item assigned to content looks like unicode. Instead of that I want to get the result of the following:
<span class="fa-stack fa-5x">
<i class="fa fa-info-circle fa-stack-1x" style="color:blue" ></i>
<i class="fa fa-ban fa-stack-1x" style="color:red"></i>
</span>
How can I get the class 'pl-undefined' to return the FA icon generated above?
p.s: Adding the fa span in my page displays the desired icon, but I need it to be displayed using the class.
I didn't find any other way of achieving this, other than adding a javascript which will find a <span class="cell-inner-undefined"> and replace it with the fa CSS
How do you add a span tag inside of an a tag using Html.ActionLink? Is something like this at all possible?
I am using ASP.NET MVC 4 together with Twitter Bootstrap version 3.
I have a drop down menu and the HTML looks like this:
<ul class="nav navbar-nav">
<li class="#(Model.Equals("Home") ? "active" : "")">
<a href="#">
<span class="glyphicon glyphicon-home"></span> Home
</a>
</li>
</ul>
I was wanting to do the link like this:
<li>#Html.ActionLink("Home", "Index", "Home")</li>
But there is a span tag in the mix of things which makes it a bit more complex.
I can probably also use the following:
<a href="#Url.Action("Index", "Home")">
<span class="glyphicon glyphicon-home"></span> Home
</a>
Curious to know if the above is possible?
Your variant with Url.Action("Index", "Home") is correct and possible. Url.Action returns the url, so it can be used in a href.