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>
Related
When I use the following code I can easily insert the Twitter logo into my website
<li class="social-item">
<a href="https://####" class="social-link">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</li>
but when I import a custom logo (11)
<li class="social-item">
<a href="https://####" class="social-link">
<ion-icon src="./11.svg"></ion-icon>
</a>
</li>
The logo disappears and the 11.svg is not there!!!
however, I can still click the place of the logo and the link works fine :/ what might be the issue and how can I fix it?
I hope I can help you.
First, make sure Ionic is "installed" correctly:
<script src="https://unpkg.com/ionicons#4.1.1/dist/ionicons.js"></script>
make sure you are using the latest version. Then, check if your icon is saved in SVG format. Once you have done this, all you need to do is use the standard component, but reference the path to your custom SVG.
An additional tip is to create a subfolder in the folder where your index.html is located and place your SVG file and then refer to this path as it does not appear to be a syntax error with the documentation.
I am creating a custom google blogger template, I tried adding an about us page but whenever I try to visit "https://mywebsite.com/p/about.html" it shows the same content as home page. Is there any data attribute to render the about page content?
I have been scrambling my brain for 1-2 days and can't seem to find a solution.
<li class='nav-item'>
<a class='nav-link' href='/p/about.html'>
<b:class cond='data:blog.url == data:blog.homepageUrl + "p/about.html"' name='active'/>
<i class='fas fa-user fa-fw me-2'/>
About Me
</a>
</li>
Also the above snippet is supposed to add active class to that nav-link but it's not working. Can you guys spot my mistake?
Here is my full code.
https://jsfiddle.net/07at4vdc/3/
Assuming that /about is another html file and not something like React or Handlebars just try setting the path more clearly.
<a class='nav-link' href='./main/about.html'> for example. The ./ should help you navigate to the file
I've just created the bootstrap navbar on my website and I have the trouble with my url...
For example I have something like this:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#about">
About
</a>
</li>
</ul>
</div>
And my website url looks like this: "something.html#about"
I would like to remove the #about from the url. I read that I should remove? the href from this li item, and put the #about in data-target but it doesn't work for me. What is the easiest way to fix this? Thanks for any respond.
you can use data-target instead of href. It will help you to get rid of #about from the browser URL.
So instead of
href="#about"
use
data-target="#about"
I assume you are a beginner in HTML and how web pages work.
The href attribute of the HTML element a(nchor) defines the hyperlink. The "#something" points to an ID within a HTML web page. It is accessible by the JavaScript on the specific page.
In this case, your href points to the current page as no other page is referenced (the href has nothing like href="otherPage.html#about").
It might be needed by the bootstrap framework. There is nothing wrong with it. Embrace it, it is part of the internet and how browsers work.
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.
It's my first time making site, what should I do to have my site logo above the navigation bar? And if someone could correct my code and tell my what I did wrong.
www.codepen.io/anon/pen/VaPKaK
You're missing a space between "home" and style in your image tag
It's a bit confusing what you're asking, would you like your logo image to literally appear above your navigation? if so the don't put the image tag in an a list tag
So instead of:
<li id="home"><a class="active" href="#home"><img src="home.png" alt="Home"style="width:20px;height:20px;"></a></li>
<li id="news">Blog</li>
TRY
<a class="active" href="#home"><img src="home.png" alt="Home" style="width:20px;height:20px;"></a>
<li id="news">Blog</li>
Also, try not to add styles to your html. Put them in your CSS. It makes it all much easier to read.
Here is the edited Codepen with all those edits and the logo is above the Navigation.
Hope that helps!!