This question already has answers here:
ASP.NET Actionlink with glyphicon and text with different font
(10 answers)
Closed 5 years ago.
I have this anchor element that displays glyphicon and some style:
<a href="#" class="btn btn-3d btn-xlg btn-reveal btn-brown">
<i class="glyphicon glyphicon-arrow-right"></i>
<span>REVEAL EXTRA LARGE</span>
</a>
In my project I use HTML helper to create anchor elements.
I have this html helper to create anchor element:
#Html.ActionLink(item.Name, "About", "Home", item, new { #class = "btn btn-3d btn-xlg btn-reveal btn-brown" })
But I don't know how to add <i class="glyphicon glyphicon-arrow-right"></i> element to the HTML helper.
How can I define <i class="glyphicon glyphicon-arrow-right"></i> inside HTML helper?
Use #Url.Action
<a href="#Url.Action("About", "Home")" class="btn btn-3d btn-xlg btn-reveal btn-brown">
<i class="glyphicon glyphicon-arrow-right"></i>
<span>REVEAL EXTRA LARGE</span>
</a>
Related
I have downloaded a template for my app. I have to replace the menu links of this template with my project url links.
Code block of the menu link in template page::
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
Item 2
</span>
</a>
I have to use this with::
#Html.ActionLink("Program", "Index", "karyakramModels")
I tried with the code ::
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
#Html.ActionLink("Program", "Index", "karyakramModels")
</span>
</a>
I am not getting the CSS design with this code. Thank You!!!
As you have icon () inside the anchor tag, I would suggest #Url.Action() to use
<a href="#Url.Action('actionName', 'controllerName')" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
Program
</span>
</a>
the doubt is this:
I have to use a <a></a>, because of the notation I'm using in all my app, I'm working in ASP.NET MVC. So, I have an href="#Url.Action with class="btn btn-primary", a simple button as this:
<a href="#Url.Action("Manage", "Account")" class="btn btn-primary text-right">
<span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span> Administrar
</a>
(That was an example of the estructure that I need)
But now I have to convert this:
#Html.ActionLink(User.Identity.GetUserName(), "Manage", "Account",
routeValues: null, htmlAttributes: new { title = "Administrar" })
to that estructure. The fact is, I don't know where to put the routevalues and User.Identity.GetUserName(). I don't need the htmlAttributes neither the title.
Please help me and thanks a lot.
For title, you just simple use title="Administrar", so when you hover mouse on the button/link, it'll still show Administrar in tool-tip.
For Username, you will need # sign at the front.
<a href="#Url.Action("Manage", "Account")" class="btn btn-primary text-right"
title="Administrar">
<i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
#User.Identity.GetUserName()
</a>
Another suggestion is not to use Bootstrap's glyphicon, because they won't be available in next version anymore. Instead, you might want to consider using Font Awesome.
It should be:
<a href="#Url.Action("Manage", "Account")" class="btn btn-primary text-right">
<span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span>
#User.Identity.GetUserName()
</a>
routevalues will be next parameter in Url.Action method if you need it.
Like this:
Url.Action("Manage", "Account", new { id = 1 })
I suppose you have Html.Actionlink like bellow
#Html.ActionLink("Home", "index", null, new { #class = "btn btn-primary" })
all you need to do is to write it like this
<a class="brand" href="#Url.Action("index","Home")"> </a>
and you are done!
I have a table with sliders (part of a form) in one column and a button (link to other page)
<button onclick="location.href='/main';">
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</button>
Instead of opening the page, the button just submits the form. Any way I can fix this without breaking the table or the form?
Why don't just use anchor tag
<a href='/main'>
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</a>
or
# If you are using erb
<%= link_to '/main' do %>
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
<% end %>
try below code:
<a href='/main' class="btn btn-primary">
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</a>
If you used bootstrap css then you can add classes btn and btn-paimary which makes button.
Instead of opening the page, the button just submits the form.
Yes! Buttons are meant to perform actions that effects on front-end or back-end, they are not meant for navigation. You should use links(a.k.a anchors) to perform navigation.
<a href='/main'>
<i class="icon icon-078-settings icon--s2" aria-hidden="true"></i>
</a>
I'm trying add an icon with using awesome font.
I used bootstrap button type and it's working fine.But when i would like to add a social icon using tag it does not seem.How can i do that ?
<div id="socialLoginList">
<p>
#foreach (AuthenticationDescription p in loginProviders)
{
<button type="submit" class="btn btn-lg btn-social btn-#p.AuthenticationType.ToLower()" id="btn-socialID" name="provider" value="#p.AuthenticationType" title="Log in using your #p.Caption account"><i class="fa fa-#p.AuthenticationType"></i>#p.AuthenticationType</button><br /><br />
}
</p>
</div>
Simply do a ToLower here:
<i class="fa fa-#p.AuthenticationType.ToLower()">
Font awesome icons are all lower case, so it should pick them up if you do a ToLower. Remember that HTML class names are case-sensitive.
E.g.
<i class="fa fa-google"></i>
<i class="fa fa-facebook"></i>
I have this bit if code on my .cshtml page.
<a href='~/AudioFiles/#item.dateOfCall.ToShortDateString()_Store_Call.mp3'
class="btn btn-xs green tooltips" target="_blank" data-container="body"
data-placement="top" data-original-title="Play">
<i class="fa fa-play"></i>
</a>
I need to change the date to be 2014-02-19
instead of 2014/02/19
Current the link breaks because it is trying to go to 2014/02/19 which is invalid in windows file naming.
You could format the date like so:
<a href='~/AudioFiles/#item.dateOfCall.ToString("yyyy-MM-dd")_Store_Call.mp3'
class="btn btn-xs green tooltips" target="_blank" data-container="body"
data-placement="top" data-original-title="Play">
<i class="fa fa-play"></i>
</a>
For a full list of options check this page out http://msdn.microsoft.com/en-us/library/8kb3ddd4(v=vs.110).aspx