i am new in Angular and i have used Bootstrap in the pages design, but the default glyphicon icons ... huuum ... well
I have readed this tutorial http://favbulous.com/post/1006/create-custom-icons-for-twitter-bootstrap-easily but not work for me. The icons it's showing but the position is not that i want, the icons shows top of the text not to the left. I have this code
<i class="rpe rpe-user"></i> Logout
The icon is on the top of the text
With glyphicon works well
<span class="glyphicon glyphicon-off"></span> Mantenimientos
Thanks!
try adding
display: inline-block;
to your class for image
Related
Pretty much, I am trying to add an icon of a paw next to the link once its hovered. So I want icon to be invisible, and just shows when I hover over the link. I managed to do that, but when I hover over a link, other links jump to the side due to the icon being visible. How can I make it so the links already take size of the icon into consideration and do not jump on side once it shows up on hover?
[HTML](https://i.stack.imgur.com/a1CQq.png)
[CSS](https://i.stack.imgur.com/f17Ew.png)
[Before Hover](https://i.stack.imgur.com/MMFDV.png)
[After Hover](https://i.stack.imgur.com/HQv12.png)
Since I'm still quite new in Web Dev maybe solution to the problem is quite easy. I just tried random things which I don't even remember to be honest. Was adding and removing code just to see if it will make any difference. I didn't really manage to make any difference as no matter what I do ( try to include total width of the link after hovering to the basic width when not being hovered, and push the link text to the side blah blah ), it was always the same. Links just jump to the side when I hover.
Thank you in advance.
The problem here is that elements with display:none are not rendered in the DOM, so the width of the element will not be calculated, thats why it will move if you make them visible via display:block.
there are sereval solutions for your problem. I will give you two simple solutions:
1. Use visibility
HTML:
<i class="icon hide">icon</i>Test
<i class="icon hide">icon</i>Test
<i class="icon hide">icon</i>Test
CSS:
.icon.hide {
visibility:hidden
}
a:hover .icon.hide {
visibility:visible
}
2. Use opacity (here you would be able to add transition effects)
HTML:
<i class="icon hide">icon</i>Test
<i class="icon hide">icon</i>Test
<i class="icon hide">icon</i>Test
CSS:
.icon.hide {
opacity:0
}
a:hover .icon.hide {
opacity: 1
}
Hope this will answer your question.
I have developed my portfolio website using a sample grid-based bootstrap template.
After coding, I have tried testing the hyperlinks on the mobile device. But the links does not function on the mobile display.
I attempted some suggested solutions found online. But no luck so far. Can anybody help me find the issue? Please.
Portfolio link: https://pruthvirajn.github.io/
Page with problem: Contact page (right-top menu option in the home page)
Links not functioning: twitter button, google+ button and rest of the hyperlinks in the portfolio.
As you can see below, col-lg-12 text-center is covering the links, so when you try to click the link, you are actually clicking the container for the h2.project-title.
To fix this, add this CSS:
.contact col-lg-12.text-center {
pointer-events: none;
}
This allows the user to click through the container and on the links. More info on pointer-events.
or:
.contact col-lg-12.text-center {
display: inline-block;
width: 100%;
}
This makes the container only as tall as the title, allowing you to click the things.
You are using Bootstrap so you can use a class to centralize its link by adding a class, hope it will work <a target="_blank" href="https://twitter.com/PruthvirajNGS" class="btn-social btn-outline text-center"><i class="fa fa-fw fa-twitter"></i></a>
Throughout my web app I have various submit buttons. I am able to disable them after a user submits to prevent multiple post requests and submissions to the server. I also replace the text of the button with a font awesome spinner icon. "Approve" becomes <i class="fa fa-spinner" aria-hidden="true"></i>.
<a class="btn btn-success" id="approve-button" rel="nofollow" data-method="post" href="/approve?id=40">
Approve
</a>
#approve-button {
height: 34px;
width: 138px;
}
Since the text and font-size is dictating the size of the buttons, when I replace the text with the icon, the button shrinks. The only way I see the prevent this is to manually set the button height and width. But I have to do this for all buttons.
Is there a simpler way where I don't have to manually set the height and width of all buttons?
Setting the min-width & min-height or by grabbing the existing width and height, and applying an inline-style at the same time you swap the spinner.
OR
If you want to be strictly CSS based, you can set two span elements within the button: one for the spinner, and the button label. Thus, position absolute the span spinner to sit above the button, and when your spinner is active (display: block), and make the span label hidden (visibility: hidden) -- this will keep the proportion of the button.
To demonstrate: forked off of TheEarlyMan's answer: http://codepen.io/brh55/pen/yJNbmP
Not sure if this is what you are looking for but here's a solution codepen link
HTML
<a class="btn btn-success" id="approve-button" rel="nofollow" >
<span>Approve</span>
<i class="fa fa-spinner"></i>
</a>
Jquery
$(".fa").hide();
$("#approve-button").click(function() {
$("span").hide();
$(".fa").show();
});
I try the icon glyphicon glyphicon-chevron-right for showing the direction in my design but I need some thin than default size.
So how to reduce the thickness of default bootstrap icon of glyphicon glyphicon-chevron-right
My code was:-
<div style="color:#FFF;">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
The current bootstrap has more icons including a thinner arrow called glyphicon-menu-right.
You could always look for an alternative icon font. There are literally dozens out there - some for free. Or hire someone to create the icons you need. Or do it yourself, for example with FontForge.
You can alter css of all bootstrap glyphicons very easily. Like in this case font-size and font-weight of classes .glyphicon & .glyphicon-chevron-right can be reduced to your desired size
I try to find a solution for this too. I will search for something better, but until now I replaced the icon with .fa-chevron-down that is a little thinner than .glyphicon-chevron-right.
Just set width and heigth properties for your icon. But be sure that you change your icon dimensions in proportion one to dimension to other
On small screens ( <720px) I have a toggle menu with a font awesome icon.
I noticed yesterday that there is a full stop appearing before the menu. I can't figure out where this is coming from.
The dot in question.
The code for the menu (taken from developer tools.)
<ul id="toggle-menu">
<li class="pullDown">
<a href="#" id="pull">
<i class="fa fa-bars fa-3x "></i>
</a>
</li>
</ul>
It it appearing in the DOM within this line, even when all elements within the li are deleted.
<li class="pullDown"></li>
The site is here
The full code is here
Thanks in advance
In your style.css add this code
#toggle-menu li {
float: right;
list-style-type: none;
}
See here for an example of it in action.
The reason that dot is there is that you're adding it as a list element -- it's not a full stop, necessarily, just the marker for a new element in an unordered list. list-style-type:none gets rid of any style for the list elements.
It's not a full stop, it's a list item bullet. You're using a list with <li> tags, and the default behaviour is to put a bullet in front of whatever is inside the <li>
The real answer here though is that your code isn't very semantically correct. Why is an icon inside of an unordered list in the first place? Consider two other options...
1) Just putting <a> containing your icon in front of the nav and leaving it at that
2) Incorporating the font awesome icon in to a :before or :after psuedo-element of the nav menu itself using CSS styling. Information about how to add icons via CSS can be found on the font awesome site.
Your toggle-menu class should contain something like
list-style: none;