I am designing a website when suddenly my icons resized at a small scale.
I am using font awesome for my ICONS when suddenly the font awesome icon turns into small when the size is equal to the EVENTS name below
My code is
<font size="6"><strong><i class="fa fa-newspaper-o" aria-hidden="true"></i> EVENTS</font></strong>
It must be like this
Can you help me guys? Thanks for future answers
Definitely do not use <font>. That is a really archaic tag that shouldn't be used any longer. Instead, you'll want to use CSS. Something like:
i.fa {
font-size: 1.5em; // However big you want it to be
}
As other users said - don't use <font> tag, but set the font-size with CSS.
However your code should work as you excpect. See snippet below:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<strong><font size="6"><strong><i class="fa fa-newspaper-o" aria-hidden="true"></i> EVENTS</font></strong>
<hr>
<strong><font size="15"><strong><i class="fa fa-newspaper-o" aria-hidden="true"></i> EVENTS</font></strong>
<hr>
<strong><font size="25"><strong><i class="fa fa-newspaper-o" aria-hidden="true"></i> EVENTS</font></strong>
Related
I'm trying to make these social media icons larger in my Wordpress menu.
I used this code as a custom link in the menu:
<i class="fa fa-instagram"></i>
fa stands for FontAwesome, so your icons are a font. You can change their size by using font-size in your CSS.
just add font size to parent HTML tag. It'll works.
a { font-size: 100px; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-instagram"></i>
I want to put my font awesome icon and text paragraph into one line. How can I fix this code?
<div class="date" style="display: inline-block;">
<i class="fa fa-user-o" aria-hidden="true" style="float: left;"></i>
<p style="display: inline-block; text-align: right;float: left;" >10/01/2018</p>
</div>
Julia, remove all your floats:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="date">
<i class="fa fa-user-o" aria-hidden="true"></i>
<p style="display: inline-block" >10/01/2018</p>
</div>
Also you might make it this way:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="date">
<i class="fa fa-user-o"> 10/01/2018</i>
</div>
If your currently used font of the website has Icons Cheatsheet then you can have a set of icons of the third party. Here I would like to introduce “Font Awesome Icons”. This is a good-looking and popular set of icons.
To use this set, you need to add this code to the head section in your website (via OIW Blog):
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
– After adding CSS, you can use this code to put in the HTML which shows icons (you can apply this method to the part you use Cheatsheet of the font as mentioned above. Some fonts have unique way of using)
<i class="fa fa-user-o"></i>
If you don’t want the code in the HTML, you can just use CSS. With CSS you need to find the Class or ID of the part that displays icon and after that use the below CSS code to display it. Here I display the EDIT icon of the third party “Font Awesome Icons” before (::before) the title, along with 2 properties of padding-right and font-style (you can also display it after the title by using after property): #ohiwill
.date .fa::before {
font-family: "FontAwesome";
content: "\f044";
padding-right: 5px;
font-style: normal;
}
I've been Googling around and can't seem to find any info on this.
In short, if I inline the colors for my Font Awesome icons, the colors change. If I put the same style selectors in my external stylesheet, no color change.
Here's the html:
<i class="fa fa-3x fa-facebook-official facebook-color"></i>
<i class="fa fa-3x fa-twitter-square twitter-color"></i>
<i class="fa fa-3x fa-linkedin-square linkedin-color"></i>
<i class="fa fa-3x fa-pinterest-square pinterest-color"></i>
<i class="fa fa-3x fa-envelope-square email-color"></i>
If I inline the color styles they change:
<style type="text/css">
.facebook-color {color:#3b5998}
.twitter-color {color:#55acee}
.linkedin-color {color:#0077b5}
.pinterest-color {color:#bd081c}
.email-color {color:black}
</style>
But if I put the exact same styles in my external stylesheet, there is no color change.
One note:
I grab Font Awesome with the CDN, maxcdn.bootstrapcdn.com
My sites at www.example.com and my static files like css and js are served from static.example.com. Is there some sort of cross domain issue that would cause the stylesheet not to work but explain why the inline works?
Im looking for a good font awesome icon I could use as a "Reset" button for my application.
Im currently using fa-undo which looks like this:
The problem is that I need it to have a circle around it as the other buttons in my system do ( these are standard in font awesome icons, nothing has been modified except the color )
An example of what i need (with the undo image):
Ive been reading through the list here for nearly an hour but cant think of a possible alternative. Any thoughts?
FA has some utility classes, one of which is fa-stack. You can stack fa-circle underneath fa-undo.
.fa-circle {
color: #008db8;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-undo fa-stack-1x fa-inverse"></i>
</span>
I've imported all the font awesome css into my website using the following link code:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link href="content/css/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="content/css/theme.min.css" rel="stylesheet" />
<link href="content/css/WDWStyles.css" rel="stylesheet" />
And then added the icons using:
<p>Find me at:</p>
<a class="btn btn-primary"><span class="fa fa-twitter"></span> Twitter</a>
<a class="btn btn-primary"><span class="fa fa-github"></span> Github</a>
<a class="btn btn-primary"><span class="fa fa-linkedin"></span> Linked in</a>
My custom CSS is:
#font-face {
font-family: 'headline_onehplhs';
src: url('fonts/HEADOH__-webfont.eot');
src: url('fonts/HEADOH__-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/HEADOH__-webfont.woff2') format('woff2'),
url('fonts/HEADOH__-webfont.woff') format('woff'),
url('fonts/HEADOH__-webfont.ttf') format('truetype'),
url('fonts/HEADOH__-webfont.svg#headline_onehplhs') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-image: url('../images/background.jpg');
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.heading {
background-color:#FFF;
font-family: 'headline_onehplhs';
font-size:3.5em;
margin-left:50px;
margin-top:50px;
padding:20px;
color:#000;
}
.heading span, .main span {
background-color:#FFF;
font-family: 'headline_onehplhs';
color:#999;
font-size:0.5em;
display:block;
}
.main span {
font-size:1.75em;
}
.main {
background-color:#FFF;
margin-left:50px;
margin-top:25px;
padding:20px;
text-align:justify;
}
My directory is laid out as follows:
css > font-awesome > [font awesome folders]
And the container that I'm using has the class name "main"
But the icons still display as square boxes - is there something I'm missing?
Try to use <i class="fa fa-twitter"> rather than <span class="fa fa-twitter">
On the official doc:
After you get up and running, you can place Font Awesome icons just
about anywhere with the <i> tag.
It also says:
You can place Font Awesome icons just about anywhere using the CSS
Prefix fa and the icon's name. Font Awesome is designed to be used
with inline elements (we like the <i> tag for brevity, but using a
<span> is more semantically correct).
Although it sounds like using <span> is also acceptable, but it does not work correctly in some cases, so stay with <i> is a safer plan.
Use this instead:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
If that fixes your problem, then you either didn't upload the fonts in the correct directory or you are referencing them incorrectly.
Here is a test showing the minimum code required to use font awesome:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
Noone has mentioned the font folder in relation to the fonts. Think like why in you have to put ../ in front of background image to let it know that the img Is not contained in the CSS folder. Check the font-awesome.css file and see where it Is referencing the fonts.
Maybe like this?
HTML link
<link href='content/css/font-awesome/css/font-awesome.css?family=font+awesome' rel='stylesheet' type='text/css'>
CSS
fa{
font-family: 'font awesome';
}
Source: similar use
http://www.google.com/fonts#QuickUsePlace:quickUse
in AspNetCore (.net 7), I had this problem showing a box instead of the fontawesome icon. I'm using NPM to gulp the package and copy to wwwroot/css/fontawesome. After adding the correct links to the _Hosts.cshtml everything looks good.
<link href="/css/fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="/css/fontawesome/css/solid.css" rel="stylesheet" />
In development mode, I noticed 404 on the webfont files. After more research, I found that the mime types were not configured properly. Adding the following to program.cs, the problem is solved:
app.UseHttpsRedirection(); //Existing
// Set up custom content types - associating file extension to MIME type
var provider = new FileExtensionContentTypeProvider();
// Add new mappings
provider.Mappings[".ttf"] = "font/ttf";
provider.Mappings[".woff"] = "font/woff";
provider.Mappings[".woff2"] = "font/woff2";
app.UseStaticFiles(new StaticFileOptions
{
ContentTypeProvider = provider
});
app.UseRouting(); //Existing