CSS Font Twitter Like Close Button, What Did I Missing

css font twitter like close button, what did I missing?

It's not an alphabetical "x" look closely at the character × x X.. it's ascii

× (Multiplication Symbol) ALT+0215

Unicode character for X cancel / close?

✖ works really well. The HTML code is ✖.

An alternative is ✕: ✕

Changing HTML button font with CSS

It is so simple, you already have it. I think you made a mistake while writing CSS of it, you have a space in input[type=button], though you were pretty close.

<style> 
body {
    font-family: monospace;
}
input[type=button] {
    font-family: monospace;

}
</style>

Font Awesome 5, why is CSS content not showing?

^{If you are using the JS+SVG version Read this: Font Awesome 5 shows empty square when using the JS+SVG version}

First, you only need to include the CSS file of Font Awesome 5 either in the head tag using:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

Or within the CSS file:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")

Then you need to correct the font-family and the content like below:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
.fp-prev:before {    color:#000;    content: '\f35a'; /* You should use \ and not /*/    font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/    font-style: normal;    font-weight: normal;    font-size:40px;}

<i class="fp-prev"></i>

Is button.close missing in close.less?

button.close is in close.less

https://github.com/twitter/bootstrap/blob/master/less/close.less

make sure you are using

<button type="button" class="close" data-dismiss="alert">×</button>

and not

<button type="button" class="close" data-dismiss="alert">x</button>

for elder version of the twitter bootstrap and iso-8859-1, try with utf-8.

If you still have problems, use jsFiddle to post your code and I will have a look.

Why some of the FontAwesome icons are not showing?

You are using few icons from fontawesome 5. for example fa-brain. You need to update css link and font classes accordingly.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous">
<!-- Load font awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<!-- The social media icon bar --><div class="icon-bar">  <a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>  <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>  <a href="#" class="google"><i class="fab fa-google"></i></a>  <a href="#" class="linkedin"><i class="fab fa-linkedin-in"></i></a>  <a href="#" class="youtube"><i class="fab fa-youtube"></i></a>  <a href="#" class="calculator"><i class="fas fa-calculator"></i></a>  <a href="#" class="brain"><i class="fas fa-brain"></i></a></div>

Why is the close button (X) not rendering correctly in my modal?

This is the x in your code:

× U+00D7 MULTIPLICATION SIGN

When it should be

x U+0058 LATIN CAPITAL LETTER X.

Use the one on the keyboard.

One icon is missing in font awesome in Windows

Also having this issue with Chrome in a local environment (Probably more than that but can't be bothered to fully test) - I suspect the latest release has gotten messed up.

I've built a version using the fa-stack method below, just needs a little css for positioning but works fine:

HTML

<a role="button" class="btn btn-primary">
<span class="fa-stack">
<i class="fa fa-shopping-cart fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x fa-primary"></i>
</span> New</a>

CSS

.fa-primary{
position: relative;
color: #1a9dff;
font-size: 0.5em !important;
top:-4px;
left:2px !important;
}

Edit: I've had to tweak the css for use with the CDN version of FontAwesome - Further suspect the download package and the CDN do not match

See this codepen example

This will overlay a plus icon of the colour of your choosing over the shopping cart icon. (Edit: Apologies for my poor indentation, first time answering!)

I'll point out that something similar happened with Bootstrap a few months ago, I updated the core files from 3.1.1 to 3.3.4 (or something) and it completely destroyed my layouts, though using the CDN used on bootstrap's homepage everything was fine, just not the downloadable package.

Basically, hang about for a bit and I'm sure they'll sort it, even the pros make mistakes - Use the same source as on working examples until the download package gets fixed if you're desperate to use it.

Font Awesome not working, icons showing as squares

According to the documentation (step 3), you need to modify the supplied CSS file to point to the font location on your site.

CSS Font Twitter Like Close Button, What Did I Missing