I'm having some links on my site which are displayed using FontAwesome icons. However, on mobile devices (tested Chrome and FF) I can't "click" them. They simply seem to have no function, though working on desktop browsers.
Did I miss something?
I use the following code:
<span class="side">
<ul>
<li><i class="fa fa-print"></i></li>
<li><i class="fa fa-envelope"></i></li>
<li><i class="fa fa-link"></i></li>
</ul>
.side a {
display: inline-block;
color: #fff;
line-height: 16px;
width: 16px;
height: 16px;
text-align: center;
}
You can take a look here: http://mydivision.net/
I'm talking about the links on the right side of each blog post image (printer, envelope and link icon).
The printer works fine for me.
Try using a span, it might work.
Related
I am trying to create a responsive dropdown menu with icons and text in full mode and icons only when windows are small (for the top level). For the second level, I still want to show the names in the sub menu.
Full code On codepen:
https://codepen.io/-royqooe/pen/QWmXEKw
See the last element of the menu with sliders
My html :
<li><i class="fas fa-home"></i><span class="topbar-text">Home</span></li>
<label for="btn-1" class="show_nav"><i class="fas fa-sliders"></i><span class="nav_parent topbar-text">Admin</span></label>
<a><i class="fas fa-sliders"></i><span class="nav_parent topbar-text">Admin</span></a>
<input type="checkbox" id="btn-1">
<ul class="navbar_dropdown">
<li><i class="fas fa-users"></i><span class="subbar-text">Manage users</span></li>
<li><i class="fas fa-list"></i><span class="subbar-text">manage</span></li>
<li><i class="fas fa-users"></i><span class="subbar-text">browse files</span></li>
</ul>
</li>'
My responsive css
#media screen and (min-width: 630px) and (max-width: 1080px) {
.topbar-text {
display: none;
}
.subbar-text {
font-size: 12px;
}
nav ul ul li{
position: relative;
margin: 0px;
left: 0px;
width: 150px;
line-height: 0px;
float: left;
}
}
The problem is probably around width: 150px; thing is if I remove it, the submenu will become so small, condensed, and ugly and have text divided into 3 lines but won't break out of the page.
If I add a fixed width text shows inside as I want but it breaks out on the right side...
Also, in the responsive part, if you move the mouse to the submenu directly it disappears, moving the mouse in "L" shape pattern, down to the empty area under the menu, and then to the left to the submenu works because of the padding I added. So I would appreciate if someone explains how to fix that too...
Can someone help to make the submenu still maintain a good width to show all text but restricted to the window? if needed the menu should expand to the left, instead of right outside the page
EDIT:
With somdow's answer, it improves thing for the full mode, but the second mode still has an issue (the L shape thing but reverse this time) see the following gif:
IF i understand you correctly, then all I did was, go to
nav ul ul, and add
right: 0px;
and that's it. Now obviously you can play with the numbers but this should work and your menu wont hide off page any more.
like this(I took this from your code on codepen)
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid cyan;
opacity: 0;
visibility: hidden;
transition: top .1s;
right:0px;
}
Add the last line and you are done.
came out like this:
happy coding
I am trying to display my own font awesome 5 icons on my main navigation menu (WordPress) instead of using a plugin with 4.7 icons.
I thought I would start with my Home icon. So I went to my menu editor and switched the settings to display the CSS classes edit box.
Here is the site and you can see the Home button:
https://www.publictalksoftware.co.uk
It is looking like this:
I set this as the class for the home button:
fas fa-home
And this is my custom CSS styling so far:
.fas::before {
float: left;
margin-right:.25em;
margin-top: -.265em;
font-size: 1.2em;
line-height: 1;
font-weight: 900;
vertical-align: middle;
}
I am trying to match the settings used on the other buttons so that the icon is to the left of the Home text but I can't get it to work. I have used the "Inspect Element" but can't get any further.
I saw this but the answer about using fa-fw seems to be for version 4.7?
I tried this:
.fas::before {
float: left;
padding-left: 13px;
padding-top: 12px;
margin-right:.25em;
font-size: 1.2em;
line-height: 1;
font-weight: 900;
vertical-align: middle;
}
Things have improved but I still can't get the text "Home" on the right.
I also tried some of what it said here:
https://premium.wpmudev.org/blog/add-icons-wordpress-menus/
But I can't get it right. No matter what I try, the Home link is below the icon. :(
I have two font icons in the (Bootstrap) navbar, a menu icon and a search icon:
<div class="menu-icon">
<i class="fa fa-bars"></i>
</div>
<div class="navbar-brand">
Website
</div>
<div class="search-icon">
<i class="fa fa-search"></i>
</div>
CSS:
.menu-icon {
float: left;
}
.search-icon {
float: right;
}
.menu-icon, .search-icon {
font-size: 1.6em;
padding: .6em 1em;
cursor: pointer;
background: #f55;
}
This works well on one browser but not on others because they have their own different sizes of font, which can also be changed in their settings.
This difference of size across different browsers require different padding or font-size. Which is clearly visible if you set a background color for them.
How can I avoid this font difference?
I would use background-image icons instead of font icons, if possible, to avoid the font sizing issue.
if you have not already, try specifying the font-size of your body element in %, eg.:
body {
font-size: 100%;
}
The em size that you set, refer to this value, which might not be the same in every browser unless you specify it. If you do, your em values should be consistent in all browsers.
There is a nice article about this (as well as line heights) here: https://alistapart.com/article/howtosizetextincss
Does this solve your problem?
Here is my CSS:
ul.list-ok {
list-style: none;
margin: 0;
}
ul.list-ok li {
margin-bottom: 8px;
height: 18px;
line-height: 18px;
}
.fa-angle-right:before {
content: "\f105";
}
Here is my HTML:
<ul class="list-ok" style="margin-top: 25px !important;display:inline-block;">
<li style="height: initial;"><i class="fa fa-angle-right"></i>Streamlined processes saving you time and money. This is a very long bullet point that needs to wrap and wrap and wrap so that a very long paragraph lines up properly.</li>
<li style="height: initial;"><i class="fa fa-angle-right"></i>A+ rated with the BBB</li>
</ul>
Here is my output:
Here is my fiddle.
Here is my issue ;)
I would like the the word 'and' to wrap properly and line up with the start of the other text, I was able to achieve that with using other list-styles but the client wants to use this method. I have searched google and tried a number of different techniques to align the text and also tried enclosing my text in <p> and other elements in an effort to achieve my desired output. I am at a loss and seem to be getting further away from the answer the more tutorials I follow and links I find on google. Any help is appreciated.
EDIT:
I have used the attribute display:inline-block; but it cuts the text off on a mobile device so this is not an option, i need the text to wrap properly. In an effort to make the question more simple I cut out several bullet points that are quite long
This is what I would like the finished product to look like, but using my custom bullet point created by the fa-angle-right class:
Try white-space:nowrap Fiddle
ul.list-ok {
list-style: none;
margin: 0;
}
ul.list-ok li {
margin-bottom: 8px;
height: 18px;
line-height: 18px;
white-space:nowrap;
}
.fa-angle-right:before {
content: "\f105";
}
<ul class="list-ok" style="margin-top: 25px !important;display:inline-block;">
<li style="height: initial;"><i class="fa fa-angle-right"></i>Streamlined processes saving you time and money</li>
<li style="height: initial;"><i class="fa fa-angle-right"></i>A+ rated with the BBB</li>
</ul>
Wrap the li text in '<\span><\/span>' tag and style it with as per your need.
try to fix the min-width of the <\span><\/span> so that it will not distorted in smaller screens.
Basically I'm creating a spry menu, but can't seem to get this 10x10px image to sit next to a menu item. Photoshop ex:
Without seeing your code, it is impossible to know how you're trying to implement it. However, for these types of icons it's often easier to just use something like font-awesome. Here is a JSFIDDLE of it being very easy implemented with font-awesome. http://jsfiddle.net/JfGVE/448/
<a class="navlink">
Design <i class="fa fa-angle-down"></i>
</a>
#import 'http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css';
.navlink {
font-family: verdana;
font-size: 40px;
font-weight: 100;
}
.navlink i {
font-size: 30px;
}