I am using this template: https://startbootstrap.com/template-overviews/grayscale/ and am trying to replace the icon, which uses the i tag, with my own logo. I can't seem to find out how to use the i tag with my own image. I tried replacing it with an img tag, but the styling gets messed up. This is the line of html that is causing the issue:
<a class="navbar-brand page-scroll" href="#page-top">
<i class="fa fa-play-circle"></i> <span class="light">Start</span> Bootstrap
</a>
I don't know what css, if any, to include since there is a lot relating to the specific class. Any help appreciated.
Edit: UncaughtTypeError's comment is the way to go.
That is because the .fa-play-circle CSS class is affecting the "play icon" using the following CSS (found in font-awesome.min.css):
.fa-play-circle:before {
content: "\f144";
}
So, it isn't really an image as much as it is a glyph loaded before the tag.
Related
How to generate the twitter , facebook and youtube icon as in the top of the website
https://store.linefriends.com/
If I inspect the element I see the following html :
<li></li>
Not sure how that icon gets generated from this html line as there is no image etc here
Such icons can be generated using an icon library. The most popular choice is FontAwesome. If you want to add links, you can enclose i tag with an anchor tag, with href attribute. You need to add a bit of styling to it.
a{
color: black;
text-decoration: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
<span><i class="fab fa-twitter"></i></span>
<span><i class="fab fa-facebook-f"></i></span>
<span><i class="fab fa-youtube"></i></span>
<span><i class="fab fa-instagram"></i></span>
</div>
You can get the code for link tag from cdnjs
You can search for all icons on their website
You can also download icons and use img tag, but using an icon library, makes things a lot easier.
You use a font family ("Turbo" as I can see) that contains web icons inside.
The icon is generated from the class icon-twitter. Inside this <a> element there is a .icon-twitter::before pseudo element that contains the content value content: "\ea96";. This value is being interpreted to this icon.
So, if you want to change this icon you have to remove the icon-twitter class and put an <img> element with your custom image file ( I would recommend to be an svg file for better load time performance ).
you will need to check each css file found in inspect element via view source for class icon-twitter. (with code like )
Or
Use font awesome for this. More details are available on https://fontawesome.com/
Fon awesome alternatives are available on https://www.google.com/amp/s/www.hongkiat.com/blog/free-font-icons-to-bookmark/amp/ OR https://alternative.me/font-awesome
Or
You can use images to achievs this with tag
I might be asking a dumb question, but I am a newbie in javascript and its libs.
I came across the same problem as this post, and in the accepted answer, there was this line
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
However, after adding this line I have a navbar icon even though I did not include a img in my html. I also cannot manipulate the position of this icon built with this stylesheet. Can anyone explain what it does in this context? (referring to the post) I noticed that without this line of code the CSS and Javascript cannot be applied to a simple
<img class="search" src="icon.png" width="30" height="30">
And how is it possible for me adjust the location of the icon with this line of code?
font awesome is a css sheet, that when you use "font awesome classes" on a particular element, makes an icon appear. there's no jpgs or anything to mess with.
<i class="fa fa-address-book" aria-hidden="true"></i>
in a plain html, this will do nothing. but if you add the stylesheet to the page, you will see an address book icon.
all icons are located here: http://fontawesome.io/icons/
I've been scouring the web, and I can't find an answer to this. Is there away to add two Font Awesome icons in one i tag?
I can do it if I put two i tags side by side, like this:
Good for: <i class="fa fa-male fa-2x"></i><i class=" fa fa-female fa-2x"></i>
So is there anyway to do this?
Glyph-based fonts like this generally function by changing the content of the element to a specific value, which the font picks up and renders as the appropriate glyph.
So it's unlikely that you'll be able to use a single tag to display both of them unless the library provides specific syntax for handling that behavior on it's own (similar to how Font Awesome uses stacking).
This is not possible in a single <i> tag, reason is the way how the glyph identifying classes are applied. For longer or dynamic sequences you can however directly use the icons codes in markup notation:
html: <span class="font-awesome"></span>
css: .font-awesome { font-family: FontAwesome; }
This obviously requires that you load the font as FontAwesome.
I created a fiddler as simple demonstration: https://jsfiddle.net/6ofmn36g/
I do agree though that this is an approach that is somewhat hard to read, though...
With Font Awesome 5, it's possible!
Masking
Combine two icons create one single-color shape, thanks to the power of SVG in Font Awesome 5! Use it with our new Power Transforms for some really awesome effects.
Go through the Masking section in this link.
The below snippet is a small working example taken from their site
<!-- Important : Use the SVG & JS method and reference the Js file, not the CSS file -->
<script src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>
<div class="fa-4x">
<i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
<i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
<i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:MistyRose"></i>
</div>
Not possible with current library of FontAwesome. But there are work arounds as arkascha has suggested below.
Additional Info:
Not exactly what you are asking for But I think this will help you, Also future crowd who falls into this thread with the title.
I had answered similar stuff... Here
https://stackoverflow.com/a/36491858/2592042
You can also build a custom icon by using set of icons available in the font-awesome icon set by stacking and aligning them accordingly. Stacked Icons
Example:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-lg">
<i class="fa fa-male fa-stack-1x"></i>
<i class="fa fa-female fa-stack"></i>
</span>
I am using Awesome Font in my web project. Is there any option how to make shortcut to bunch of icons? E.g. I have circle-thin icon. Now on page I want to put three icons together so the result is OOO, but I do not want to put 3x times <i class="fa fa-circle-thin"></i> s in the code. So can I somehow create CSS shortcut when I write it, 3 circles will appear?
Example:
.circle-three {
<i class="fa fa-circle-thin"></i>
<i class="fa fa-circle-thin"></i>
<i class="fa fa-circle-thin"></i>
}
Then on page I would use only .circle_three class instead of typing the code for circle three times.
It is possible by both
adding a new class and creating a rule that inherits everything and only adds the changes you want to, and
by creating a brand new class that will substitute the original one completely.
Since the only attribute in the FontAwesome CSS for fa-circle-thin is the content of the before pseudo-element, and hence there is nothing else to inherit, in this case both solutions (appended class or new class ) have the same behavior / meaning.
.fa-circle-thin.triple::before {
content: "\f1db\f1db\f1db";
}
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Standard : <i class="fa fa-circle-thin"></i>
Triple : <i class="fa fa-circle-thin triple"></i>
If you check the CSS file included with Font Awesome, you'll find this rule:
.fa-circle-thin:before {
content: "\f1db";
}
So, you can make a similar rule to achieve what you want:
.fa-circle-three:before {
content: "\f1db \f1db \f1db";
}
Check this pen for an working example.
Sorry if this is a stupid question, but I'm extremely new to bootstrap, and am having trouble making the glyphicons show up where I want them. I used the icon tag with the icon I wanted: <i class="icon-home"></i>. Besides the below code and adjusting the link in the .css file to where the image is saved, I haven't done anything. The whole element is:
<li class = "active">
<i class="icon-home"></i>Home
</li>
I know I have the linking to the sprite image correct in my .css file, so that's not it. What am I doing wrong? What am I missing?
The usual way is:
<li class = "active">
<i class="icon-home"></i>Home
</li>