fontawesome icon height and width coming as 0 in the browser - html

My Web app is using font awesome latest version (6.1.1) and it is working perfectly as I'm adding fontawesome icons. Now I added a new icon whose height and width are coming as zero in the browser. Code is:
<button type="button" class="btn btn-danger">
<i class="fa fa-trash-xmark" aria-hidden="true">
</i>
Delete
</button>
<i> is coming as 0 width and height. Any ideas why? A screenshot showing this problem is attached here.
Thanks

Try making the i element display inline-block with some height and width.
i{
display: inline-block;
height: 1rem;
width: 1rem;
}
If this does not work, then, there is problem elsewhere. If it does work, check your stylesheet to see if there is an overflow or layout problem.

Related

Is there a way to edit the edges or borders of fontawesome icons?

I am currently a student learning HTML and CSS. I was tasked with an assignment to replicate a single webpage. However, I am having difficulties getting the icons to look like what is shown in the model provided to replicate. The images below show what the icon area of the model should look like versus what I have, and also what the original icons looked like when just added to the HTML before color or size adjustments were made.
Original icon area of the model provided.
How close I have gotten to it
Original icons before size and color adjustments were made
I need to get the edges to be sharp and the white areas above and below the icons to be removed. I tried setting the border-radius, margin, and padding to 0px or 0% and nothing still works. I also tried using text-shadow.
My HTML code for the icon area is
'<div class="icons">
<i class="fab fa-twitter-square"></i>
<i class="fab fa-facebook-square"></i>
<i class="fab fa-dribbble-square"></i>
<i class="fab fa-tumblr-square"></i>
<i class="fas fa-rss-square"></i>
</div>'
And CSS
'i{
display: inline-flexbox;
font-size: 24px;
color: #3E5A99;
background-color: #E5EEFF;
margin-bottom: 50px;
}'
I am asking for some advice on how to get this done, please. Thank you in advance.
The short answer is no, you cannot edit the FontAwesome webfont icons without downloading, editing, and reuploading the individual svgs.
I would use the background-less versions of these icons and then put them each inside a div. Then you can set the div border-radius, background-color, etc. to exactly what you need.
A couple of pointers with this process:
Use display: grid; for each container div, that way you can also add place-items: center; to super-center each icon inside of it's div.

Use inline SVG instead of font-awesome webfont in pure CSS

I am using a bulma-based template for a static site generator and I'm looking to remove any dependencies on Javascript and any resources hosted by third parties, as well as generally minimizing things.
The template utilizes font awesome for some of the icons involved, but it's really only around 5-10 icons total, so I was planning to inline them as SVGs rather than load an entire web font. However, I'm not sure how to get as close as possible to a drop-in replacement for these few icons through pure CSS.
Here is a minimal working example of the HTML:
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<ul style="list-style: none">
<li>
<a href="https://example.com">
<span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
<span>Example</span>
</a>
</li>
<li style="font-size: 20px">
<a href="https://example.com">
<span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
<span class="link-text">Example</span>
</a>
</li>
<li style="font-size: 40px">
<a href="https://example.com">
<span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
<span class="link-text">Example</span>
</a>
</li>
</ul>
If I use this with the fontawesome CSS (see this JSfiddle) by prepending this:
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
I get an icon that scales with the font size, has the same color as the font size and is centered vertically with respect to the text. If, however, I use an inline SVG (see this JSFiddle), with this CSS:
.fa-globe::before {
content: '';
display: inline-block;
height: 1em;
width: 1em;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzY0LjIxNSAxOTJoMTMxLjQzYzUuNDM5IDIwLjQxOSA4LjM1NCA0MS44NjggOC4zNTQgNjRzLTIuOTE1IDQzLjU4MS04LjM1NCA2NGgtMTMxLjQzYzUuMTU0LTQzLjA0OSA0LjkzOS04Ni43NDYgMC0xMjh6TTE4NS4yMTQgMzUyYzEwLjY3OCA1My42OCAzMy4xNzMgMTEyLjUxNCA3MC4xMjUgMTUxLjk5Mi4yMjEuMDAxLjQ0LjAwOC42NjEuMDA4cy40NC0uMDA4LjY2MS0uMDA4YzM3LjAxMi0zOS41NDMgNTkuNDY3LTk4LjQxNCA3MC4xMjUtMTUxLjk5MkgxODUuMjE0em0xNzQuMTMtMTkyaDEyNS4zODVDNDUyLjgwMiA4NC4wMjQgMzg0LjEyOCAyNy4zMDUgMzAwLjk1IDEyLjA3NWMzMC4yMzggNDMuMTIgNDguODIxIDk2LjMzMiA1OC4zOTQgMTQ3LjkyNXptLTI3LjM1IDMySDE4MC4wMDZjLTUuMzM5IDQxLjkxNC01LjM0NSA4Ni4wMzcgMCAxMjhoMTUxLjk4OWM1LjMzOS00MS45MTUgNS4zNDUtODYuMDM3LS4wMDEtMTI4ek0xNTIuNjU2IDM1MkgyNy4yNzFjMzEuOTI2IDc1Ljk3NiAxMDAuNiAxMzIuNjk1IDE4My43NzggMTQ3LjkyNS0zMC4yNDYtNDMuMTM2LTQ4LjgyMy05Ni4zNS01OC4zOTMtMTQ3LjkyNXptMjA2LjY4OCAwYy05LjU3NSA1MS42MDUtMjguMTYzIDEwNC44MTQtNTguMzk0IDE0Ny45MjUgODMuMTc4LTE1LjIzIDE1MS44NTItNzEuOTQ5IDE4My43NzgtMTQ3LjkyNUgzNTkuMzQ0em0tMzIuNTU4LTE5MmMtMTAuNjc4LTUzLjY4LTMzLjE3NC0xMTIuNTE0LTcwLjEyNS0xNTEuOTkyLS4yMjEgMC0uNDQtLjAwOC0uNjYxLS4wMDhzLS40NC4wMDgtLjY2MS4wMDhDMjE4LjMyNyA0Ny41NTEgMTk1Ljg3MiAxMDYuNDIyIDE4NS4yMTQgMTYwaDE0MS41NzJ6TTE2LjM1NSAxOTJDMTAuOTE1IDIxMi40MTkgOCAyMzMuODY4IDggMjU2czIuOTE1IDQzLjU4MSA4LjM1NSA2NGgxMzEuNDNjLTQuOTM5LTQxLjI1NC01LjE1NC04NC45NTEgMC0xMjhIMTYuMzU1em0xMzYuMzAxLTMyYzkuNTc1LTUxLjYwMiAyOC4xNjEtMTA0LjgxIDU4LjM5NC0xNDcuOTI1QzEyNy44NzIgMjcuMzA1IDU5LjE5OCA4NC4wMjQgMjcuMjcxIDE2MGgxMjUuMzg1eiIvPjwvc3ZnPg==");
}
The icon is not centered vertically with respect to the text, and it is not the same color as the text. What is the best way to treat inline SVGs as replacements for font awesome glyphs without javascript? (I'm less concerned with the "icons are the wrong color" than the fact that they don't seem to be aligned well with the text, I just mention it because if there is an approach that solves both problems, I'd prefer that).
Perhaps this resource could be useful for you. IcoMoon has a decent selection of free icons, including the social networks, and if you click 'generate svg' you can then select 'get code' and copy/paste the html and css straight into your site.
To change icon color and layout you can simply change the css you just grabbed.
Something like:
`
.icon {
display: flex;
align-items: center;
color: #whatever-text-color;
}
`
Here is a JS-free example that you can play with. If you are using a sass variable for controlling font-size, you could also hook the image up to that to keep everything scaling together.
The only catch with using SVG over using font-awesome is a lack of svg support on old/ancient IE browsers. Everything else is a solid win - less http requests, less file size, less dependencies.
Hope this helps :)
EDIT
extra tip. For animations with inline svg, put a class or id onto the PATH tag and animate that. For rotations you might also need: transform-origin: center; since it defaults to rotating around the top-right.
If you have an svg with multiple paths, you can animate them individually and start getting really funky.
In your fiddle https://jsfiddle.net/ks392fzv/6/, if you set content to content to content: "\00a0\00a0" in the .fa-globe::before class, it will give the i content and that element can now align by the baseline.
.fa-globe::before {
content: '\00a0\00a0';
...
I forked your fiddle and made the small change here: https://jsfiddle.net/ndebellas/y4dLcqkx/.

FontAwesome icons in the AppBar of Windows 10 Universal Apps

I'm trying to set a custom icon for my Universal app's appbar. Segoe UI Symbol just doesn't have everything I'm after. I would like to use FontAwesome. Unfortunately, I can't figure out how to do that.
The only official way I can find to put custom icons into an app bar is to use PNGs, but these do not scale as well as font-awesome and are awkward to make.
The closest I've come is to create a div based element on the appbar which looks like an appbar button:
<div data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{ id:'btnLab',label:'Lab', section:'global', type:'content'}">
<div id="itemContainer" data-win-control="WinJS.UI.ItemContainer">
<i class="fa fa-flask" style="color: #000; font-size: 19px;
padding: 10px; border: 2px solid #222; border-radius: 50%;">
</i>
<br/>
<span style="color: #000; font-size: 12px;">Lab</span>
</div>
</div>
This produces something pretty close to an appbar button, which is clickable and can be assigned a behaviour
With some tweaking I believe I could get this to look identical to a button, however I'm not confident it will scale the same way that normal app bar buttons do. Also when hovering there is this nasty border around it:
Does anyone know how I can just use font-awesome, or some other font based icon set, directly in a button?
I've found an answer for this - it can be done quite easily using script. I used the DOM inspector to find that the actual HTML for the button image is like so
<button class="win-disposable win-command win-global" id="cmdKey" role="menuitem"
aria-label="Key" type="button" data-win-options="{id:'cmdKey',label:'Key',icon:'',
section:'global',tooltip:'testing out font-awesome'}"
data-win-control="WinJS.UI.AppBarCommand">
<span tabindex="-1" class="win-commandicon win-commandring"
aria-hidden="true">
<span tabindex="-1" class="win-commandimage" aria-hidden="true"
style="-ms-high-contrast-adjust: none;"></span>
</span>
<span tabindex="-1" class="win-label" aria-hidden="true">
Key
</span>
</button>
You can very easily target win-commandimage using either jQuery or straight JS and put a font-awesome icon directly in there
$('#cmdKey .win-commandimage').html('<i class="fa fa-key"></i>');
I find the icons a little small, but this can easily be fixed with CSS
#cmdKey .win-commandimage
{
font-size: 20px;
}
I encountered this issue yesterday.
<div data-win-control="WinJS.UI.AppBar" id="appBar" data-win-options="{placement: 'bottom'}" style="overflow: hidden;">
<button class="fa fa-flask" style="font-size: 2em; padding-bottom: 15px;" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'flaskBtn', section:'global', label: 'Lab', tooltip:'Lab'}"></button>
</div>
Javascript:
var myAppBar = element.querySelector("#appBar");
myAppBar.winControl.closedDisplayMode = "full";
This worked for me. To enlarge the font size, I had to use style="font-size: 2em" -- for some reason, the larger icon classes (fa-lg, fa-2x, fa-3x, fa-4x) don't work when declared in a class and it's within an AppBar.
class="fa fa-flask fa-2x" works if you create a Font Awesome element outside of an AppBar.

Unable to trigger ng-click on a button when you click the button contents

I have some buttons in an html template, controlled by an AngularJS directive. The buttons ng-click event doesn't fire when you click on the buttons contents (icon and span), clicking anywhere on the padding or blank space works fine though...
This is only an issue in Safari.
I am using AngualrJS 1.4.
The icon is in an i element using classes to find the icon I want from a font file.
<button ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
<i class="icon icon-awesome"></i>
<span>Awesome</span>
</button>
Clicking in the green or orange area works fine.
The image on the right, clicking on the element in blue, doesn't trigger the click.
I have tried messing with the z-index and I have looked to see if the icon and span elements are capturing the click and preventing it from being passed to the button (which as far as I can tell they are not...)
try with this:
<a href="javascript:void(0)" ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
<i class="icon icon-awesome"></i>
<span>Awesome</span>
</a>
I've managed to get it working using z-index.
The icon and the span needed to have the position set for the z-index to have any effect.
I added the following to my .scss file.
.awesome {
.icon {
position: relative;
z-index: 1;
}
span {
position: relative;
z-index: 1;
}
}
I'm not sure what was capturing the click event but this seems to have fixed it in my specific case.
For me the solution was to move the ng-click inside the <button> tag. I had it previously in <span> and it was working in Chrome, but not in Firefox and IE.
After the ng-click resides in <button> instead of <span> tags, it works in all three browsers with no errors.
Here is my resulting code:
<button class="btn btn-default btn-xs" ng-click="myFunction()">
<span class="glyphicon glyphicon-th-list">
</span></button>
Hope this helps.

center element in all media screen in specific div

i'm working in design using bootstrap framework
and i face problem with some screen sizes as this website is responsive
i can solve this problem by target every media but i think that there are a solution by using defined class with bootstrap
the problem i just want to center some element in center in all media screen ,to explain it i prefer using images
in the large screen thre's no problem
but in other media
this is code hint
<div class="socialicons center-block">
<i id="social-user" class="fa fa-facebook-square fa-2x social-fb"></i>
<i id="social-user" class="fa fa-twitter-square fa-2x social-tw"></i>
<i id="social-user" class="fa fa-google-plus-square fa-2x social-gp"></i>
<i id="social-user" class="fa fa-linkedin-square fa-2x social-tw"></i>
</div>
i tried this css
display: block;
margin-right: auto;
margin-left: auto;
and
margin :0 auto;
thanks for your comments guys
i made as #amitrh indicates and this work fine with the first block of items and works like this in all screen
and the links appear in center as i want and in block by apply this code
.socialicons {
display: table;
margin: auto;
for the second block in the last it have another bahavior as the font icons was bigger than the icons in the first like this
and this too
so i changed the css to
display: inline-table;
margin: auto;
and works fine and center in left in all screen like this
thanks for your comments and code hints as you saved my time and this help me to solve my issue without css hacks or additional unnecessary code
#box86rowh #amitrh #BootstrapBoogie - Christina