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.
Related
So, I'll try to keep this short. I am making a navigation and I want my logo to act as the homepage link. Like this:
However, I'm having trouble with it. Any help would be appreciated!
Code at codepen:
`http://codepen.io/aaronmtx/pen/NRYqOm`
Is the codepen for an example or is that the site you are talking about that should be working?
To make a logo a homepage link you just put an href around the image and set the path to "/".
Example:
<img src="images/example.jgp" />
In your codepen, the # sign in the links is a standard kind of "change me later with the right path" symbol that just links to the top of the current page. You need to change all of those to be a path. / is your root or home page. Anything after that will navigate to other pages.
So you will end up with / for the home page, /services or /services.html etc. depending on your folder and file names.
<nav>
<ul>
<li class="nav-logo"><img src="http://baseframe.co/a/img/White-B.png"></li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
This would make the image a link and upon click it would navigate to the root. Obviously replace your image with the correct logo path.
If that doesn't help, can you clarify by adding your code with file names and folder structure?
Hope this helps!
I am using Twitter Bootstrap for a project.
I have a widget type list-group, which is a list of elements that are used for navigation.
For some reason I can't make those links to work. Although the correct link appears when hovering, they don't take me there.
I created a fiddle to ilustrate the problem.
Can anyone help?
Regards.
When you specify http in the link it will not work in an https site.
Have a look at Bootstrap's documentation for list-group. When I put your links into a UL, things seem to work:
<ul class="list-group">
<li><a
href="http://www.google.com"
class="list-group-item active"
>External link not working</a></li>
<li><a
href="#my_local_anchor"
class="list-group-item active">
Internal link not working
</a> </li>
</ul>
I checked the internal link and it worked when yo use your anchor as an ID
<h1 id="my_local_anchor">
And the external link worked when I added:
<a href="https://www.google.com" target="_blank">
Which opens the link in a new tab which is usually better as your website will keep a presence in the users browser
Never put http protocols in the href for many reasons, one of which the protocol might be the wrong one ! (http vs https).
As for the internal link it is working properly in the JSfiddle once you actually create an element with that id.
Plus the list group should be in a LIST not a bunch of divs
this is pretty basic but I can't figure out why my image won't render. The broken image icon doesn't appear and I'm viewing my page on localhost. I'm not sure how to upload a screen shot but I've played with the relative path in many ways and can't figure out the problem. When I link to an online image it renders. I'm using rails/foundation currently but I actually had the same problem using a MEAN stack a couple weeks ago. The issue seems to be only when using a server. Any help is appreciated, thanks. EDIT: my views and assets folder are at the same level (siblings?) views path: app/views/projects/home.html.erb. images path: app/assets/images/volvo.jpg; I've selected the image file and done 'copy relative path' and played with it every which way. I don't think it's the path but who knows.
<h4>pic below</h4>
<img src"../../assets/images/bmw.jpg"/>
<h4>pic above</h4>
<h2>photo gallery</h2>
<ul>
<li>
<img src"assets/images/bmw.jpg"/>
<img src"../../assets/images/volvo.jpg"/>
<img src"saab.jpg"/>
<img src"../../assets/images/saabtwo.jpg"/>
</li>
</ul>
You are defining your images incorrectly; you forgot the equals sign (=). You need to have src= instead of just src before the image path. This is because of the way the defining/setting of attributes works in html.
For your code, this would be:
<h4>pic below</h4>
<img src="../../assets/images/bmw.jpg"/>
<h4>pic above</h4>
<h2>photo gallery</h2>
<ul>
<li>
<img src="assets/images/bmw.jpg"/>
<img src="../../assets/images/volvo.jpg"/>
<img src="saab.jpg"/>
<img src="../../assets/images/saabtwo.jpg"/>
</li>
</ul>
As a general rule, to define a style in html, you do this: attribute="value".
Sooo.. I've got this navigation on the frontpage. I'm trying make it link to an anchor on another page.
www.oddfuse.com
This is the anchor link:
<a class="hover" title="Skills" href="/page#skills">
As you can see, it does not redirect to the specified page.
However it does work when typed directly into the address bar:
www.oddfuse.com/page#skills
This also works:
<a class="hover" title="Skills" href="/page">
But with the hash, I get no response whatsoever.
Any ideas on how I fix this?
Okay, so it turned out that it was the jQuery Mobile somehow messing with the anchor tags.
I needed to put data-ajax="false" in the link, and it now works perfectly. TMYK.
Found the solution here
can you try including the file extension?
i.e.
<a class="hover" title="Skills" href="/page.html#skills" />
I'm wondering if it thinks the # is part of a file name that can't be found.
If you want a link to jump a specific location on a different page, you'll need to replace #anchor with the full URL for the target page, similar to:
<a class="hover" title="Skills" href="http://oddfuse.com/page/#skills">
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>