I have a weird problem: one of my FontAwesome icons is not showing up although all other icons on the view work. I can't figure out why.
<a class="add-img fa fa-plus-circle" title="#SharedResources.Index.Add" data-bind="click: mainDataAdd"></a>
i've checked that icon is properly named
tried another icon class, didn't work
No matter which icon I put inside that link, it just doesn't show up.
<tr class="actions-row" role="row">
<td class="header-action-row" style="border:none;" colspan="12">
<h6 class='datatable-title'><span class='fa fa-list'></span> #SharedResources.Index.SocialWorkerLog</h6>
<div class="action-images pull-right">
#{
Dictionary<string, string> reports = ReportManager.GetReportList(ReportLocations.ResidentActiviesAllMainGrid_Top.ToString());
if (reports.Count() == 1)
{
<a class="fa fa-print" title="#SharedResources.Index.Print" data-bind="click: function(){printreportSocial('#reports.First().Key',$data);}" style="color:#337ab7; cursor: pointer;"></a>
}
}
<a class="add-img fa fa-plus-circle" title="#SharedResources.Index.Add" data-bind="click: mainDataAdd"></a>
</div>
</td>
</tr>
Your code is fixed. Used below linked font Awesome CDN and give color to anchor tag
a{
color:red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
<a class="add-img fa fa-plus-circle" title="#SharedResources.Index.Add" data-bind="click: mainDataAdd"></a>
Related
I have a Bootstrap 4 dropdown menu whose clickable items are made of an icon and a short text next to the icon. I would like to have the icons and the text of all elements aligned. Naturally, I tried to do this with a table. Unfortunately, Bootstrap's dropdown-item class seems to interfere with the table layout, as shown by this JSfiddle:
HTML:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<table class="clickable-rows">
<tbody>
<tr class="dropdown-item" data-href="#">
<th><i class="fa fa-credit-card-alt"></i></th>
<td>Credit card</td>
</tr>
<tr class="dropdown-item" data-href="#">
<th><i class="fa fa-eur"></i></th>
<td>Cash</td>
</tr>
</tbody>
</table>
</div>
</div>
Javascript:
$( document ).ready(function() {
$('table.clickable-rows tr').click(function() {
window.location = $(this).data('href');
});
});
CSS:
table.clickable-rows td:hover {
cursor: pointer;
}
This gives me:
Instead of this, I would like to have the Credit card and Cash aligned as indicated by the red line, as well as icons centered within their column. How can I achieve this?
Note: The CSS and JS code are not directly related to the question. They ensure that whole rows behave like a clickable link. I have included them just to show a fully functional example.
The internet has enough say about why not to use <table /> to structure your HTML elements so I'm not going to repeat that here.
Your problem can be easily fixed by setting a fixed width on the icons, or better using FontAwesome's .fa-fw fixed width class. FontAwesome icons are center aligned by default inside the i.fa tag.
No need to set cursor: pointer; CSS, and no need to write JavaScript to get the data-href because the .dropdown-item is now a true anchor tag.
JSFiddle demo: https://jsfiddle.net/davidliang2008/6s18j09L/12/
Live demo...
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown button</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<i class="fas fa-credit-card fa-fw"></i> Credit card
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-euro-sign fa-fw"></i> Cash
</a>
</div>
</div>
<!-- Demo CSS libs -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<!-- Demo jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"></script>
The answer is pretty simple and fortunately, as you are using Bootstrap, there is a class called .fa-fw. This class adds consistency and proper spacing to the FontAwesome icons which helps in solving your problem.
Use it in this way: <i class="fa fa-credit-card-alt fa-fw"></i>
Code:
<table class="clickable-rows">
<tbody>
<tr class="dropdown-item" data-href="#">
<th><i class="fa fa-credit-card-alt fa-fw"></i></th>
<td>Credit card</td>
</tr>
<tr class="dropdown-item" data-href="#">
<th><i class="fa fa-eur fa-fw"></i></th>
<td>Cash</td>
</tr>
</tbody>
</table>
Sandbox link to check:
https://codesandbox.io/s/wizardly-beaver-92vrg?file=/index.html
this may also do..
.dropdown-item .fa:before {
display: inline-block;
min-width: 35px;
text-align: center;
}
I have the below script which I am trying to apply some CSS to, to overwrite the bootstrap defaults.
h2 class="sr-only">${Search Categories}</h2>
<div role="list" class="list-group">
<a role="link" ng-class="{active: !data.t}" class="list-group-item"
ng-href="?id=search&q={{data.q}}" aria-label="${All search results}">
<i class="fa fa-chevron-right"/><span class="m-l-sm">${All}</span>
</a>
<a role="link" ng-repeat="source in data.searchSources | orderBy:'order'"
ng-href="?id=search&t={{source.id}}&q={{data.q}}"
ng-class="{active: data.t==source.id}"
class="list-group-item" aria-label="{{source.name}} ${Search results}">
<i class="fa fa-chevron-right"/><span class="m-l-sm">{{source.name}}</span>
</a>
</div>
Current the issue currently is that when one of the links is selected its blue which is OOTB functionality for bootstrap list-group-item but I am having some trouble overwriting it.
I assume I need something like a:focus {background-color: Whitesmoke} or list-group-item:focus ... but neither of these seem to work.
What is the right direction?
you should overwrite the :visited not :hover
ex :
a:visited {background-color: Whitesmoke}
I am building a website that has the usual social media links in a footer on my page:
They are hosted in an HTML element coded as:
<div class="social">
<table>
<tr>
<td>Tweet </td>
<td>
<div
class="fb-like"
data-href="#Context.Request.Scheme://#Context.Request.Host.ToString()#Context.Request.PathBase#Context.Request.Path"
data-layout="button"
data-action="like"
data-show-faces="true">
</div>
</td>
<td>
<script type="IN/Share" data-counter="right">
</script>
</td>
<td><a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"><img alt="Pin it" src="//assets.pinterest.com/images/pidgets/pin_it_button.png" border="0" /></td>
</tr>
</table>
</div>
How can I force the alignment or padding of the buttons to be consistent?
Alternatively, if I want to use my own icons and hide these is there a standard approach to doing that?
Thanks
Mark
The way this is constructed is wrong! Please use table for data and not for styling. Change it to a div and you'll find that making it mobile responsive is easy.
Try to nest the divs so you can just move your main div and all the sub-divs within it moves along.
Try something like this:
.social { display: inline-block; }
<div id="social-icons">
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
<div class="social"><img src="http://lorempixel.com/50/25/"></div>
</div>
And to make changes when viewing from a smaller screen - eg; mobile, then use media queries to align the content when a certain device size is reached.
Media Query CSS:
#media screen and (max-width: 480px) {
.social {
display: block;
width: 100%;
}
}
Of course, change the css styling to whichever you prefer.
I would use flex instead of a table layout. Set the parent element to display: flex; and align-items: top;. That forces the direct children of .social to align at the top.
.social {
display: flex;
align-items: top;
}
.social a {
padding: 5px 10px;
margin: 5px;
background-color: yellow;
}
<div class="social">
Facebook
Instagram
Pinterest
Twitter
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="social">
<table>
<tr>
<td>
<button type="button" class="btn btn-info">
<i class="fa fa-twitter" aria-hidden="true"></i>
Tweet </button>
</td>
<td>
<button type="button" class="btn btn-success">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Like </button>
</td>
<td>
<button type="button" class="btn btn-success">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Share </button>
</td>
<td>
<button type="button" class="btn btn-danger">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
Save </button>
</td>
</tr>
</table>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I am making use of the following css to toggle a chervon, but the problem is at start-up the wrong chevron is display. As soon as you start the toggle, it works. Not sure what I'm doing wrong?
CSS:
.arrow-toggle .fa-chevron-down,
.arrow-toggle.collapsed .fa-chevron-right {
display: inline-block;
}
.arrow-toggle.collapsed .fa-chevron-down,
.arrow-toggle .fa-chevron-right {
display: none;
}
HTML:
<tr ng-repeat-start="foo in vm.bar track by $index"
data-toggle="collapse" data-target="#task{{$index}}"
class="arrow-toggle">
<td>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</td>
</tr>
See the Pen Chevron Toggle Issue by Richard (#Programm3r) on CodePen.
Thanks in advance!
add class collapsed to the tr initially
<tr ng-repeat-start="foo in vm.bar track by $index"
data-toggle="collapse" data-target="#task{{$index}}"
class="arrow-toggle collapsed">
<td>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</td>
</tr>
The .fa-chevron-down is hidden if the tr has the class .collapsed
.arrow-toggle.collapsed .fa-chevron-down,
.arrow-toggle .fa-chevron-right {
display: none;
}
http://codepen.io/anon/pen/LbWwdN
Here is my page screenshot http://s30.postimg.org/44jynnz35/Untitled_2.png
html:
<div id="social-bar">
<a href="https://www.facebook.com/pages/Open-Source-Hacker/181710458567630">
<i class="icon icon-facebook"></i>
<span>Facebook</span>
</a>
<a href="https://twitter.com/moo9000">
<i class="icon icon-twitter"></i>
<span>Twitter</span>
</a>
<a href="https://plus.google.com/103323677227728078543/">
<i class="icon icon-google-plus"></i>
<span>Google Plus</span>
</a>
<a href="http://opensourcehacker.com/">
<i class="icon icon-rss"></i>
<span>Blog</span>
</a>
</div>
I have been created social links with social icons, I took source code from this link https://github.com/miohtama/FontAwesome-and-Bootstrap-social-icons-example/
I need one more link and icon, that is mailbox.
So i added code like this,
<a href="http://opensourcehacker.com/">
<i class="icon icon-gmail"></i>
<span>Email</span>
</a>
But i m not sure for mail box icon code,
I have 3 files,
1. <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
2. <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" />
3. <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
So may i know, exact code for mailbox icon or where can i take?
Any help would be highly appreciated.
Thanks in advance.
It's icon-envelope
<i class="icon icon-envelope"></i><span>Email</span>
Since you are using older version of fontawesome, some icons may be missing from the file. Try using this updated library : http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css instead of older one.