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;
}
Related
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. :(
How do I draw shapes within buttons? I am trying to draw a plus sign within a button.
.button{
background-color: #423C3B;
padding: 32px 32px;
border-radius: 8px;
}
This is the code I have for my button.
Thanks
For "drawing" simple, popular shapes,you can use fonts made for symbols, like font-awesome. Check this jsfiddle for an example:
https://jsfiddle.net/gc4z9o9n/
<button class="btn">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
If you only need the plus sign an icon font could be overkill, requiring extra files and requests. You could just could use + or + for your geometry.
button {
padding: 0.5rem 1rem;
color: whitesmoke;
font-size: 3rem;
background-color: #423C3B;
border-radius: 8px;
}
<button type="button">+</button>
Adjust padding, font-size etc. as needed.
If you really liked the style of an icon font then I suggest using something like IcoMoon App to select only the icons you need to keep the footprint nice an minimal.
I am trying to make a start page of sorts, and I want it to look somewhat like this: https://imgur.com/zjzKyRD (poorly made, but the program I used was really bad(I miss mspaint))
I originally used buttons, which made it really easy to link and customise, but I had some issues with size, so I tried with a div, but I can't seem to make the whole div box a clickable link. If I am able to figure that out, I still need to place the boxes in specific places and I have no idea how.
The question: How can I make these boxes, place them in a grid like formation and have them link to different sites? Would it also be possible to make a function where I can hover over one of the "sites" and it would show me some information about it? (manually entered)
Please keep in mind I'm really new to this, so an explanation would be nice :P Thanks.
Edit: Didn't include any code, here it is:
CSS ("borrowed" from w3)
.button {
margin-left: 150px;
margin-top: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;}
.button1 {
background-color: #ffbf80;
color: black;
border: 2px solid #ffbf80;
min-width: 350px;
width: 350px;}
.button1:hover {
background-color: white;
color: #ffbf80;}
HTML:
Google
Thats just one of the buttons, but the others are basically the same, but with different links, margins and colours(colors?).
When using multiple boxes they appear below each other, not besides each other. I have messed around with a bunch of different margin settings, a few things I found online when browsing around but nothing seems to align them properly.
First of all I'd suggest that you use some grid framework, such as Bootstrap or Foundation. Nobody writes websites in plain HTML anymore.
Secondly, I think you can use the a-tag and change the css so that it's an inline-box. Especially if you're only going to use them as links and not do anything fancy (such as some dynamic animations). You should probably have a container class around those to represent a row. As follows:
<div class="container">
<a class="linkbox" href="link1"> Link 1 </a>
<a class="linkbox" href="link2"> Link 2 </a>
<a class="linkbox" href="link3"> Link 3 </a>
</div>
<div class="container">
<a class="linkbox" href="link4"> Link 4 </a>
<a class="linkbox" href="link5"> Link 5 </a>
<a class="linkbox" href="link6"> Link 6 </a>
</div>
Check out this fiddle with accompanied css https://jsfiddle.net/wwk4tyzw/2/
Just because it's probably going to be more relevant in the future i want to throw this in here: https://drafts.csswg.org/css-grid/
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.
You can view my site live here.
I'm fairly new at designing responsive websites and I'm trying to develop my coding skills. I am trying to make sure that my main navigation and site title look consistent across all screen sizes. However I'm having issues with setting up the CSS properly. I'm usually quick with finding a solution, but for some reason I can't get the result I want to achieve.
The plan is to align the site's title and the navigation below each other and although there numerous ways of doing that, I can't seem to figure out the best practice.
It currently looks messed up and the navigation is being cut off at certain edges. I've tried adding more and removing padding to/from the responsive stylesheet rules.
Current Screenshot
My current navigation looks like this:
CURRENT MARKUP
/*** CURRENT CSS ***/
.title {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 13px;
padding:10px;
text-transform:uppercase;
letter-spacing:2px;
color:#00e9d9;
margin-right:232px;
}
#navigation {
background-color:#18161d;
padding-top:4px;
padding-bottom:4px;
font-size: 13px;
letter-spacing:2px;
text-align:center;
font-family: 'Open Sans', sans-serif;
font-weight:700;
font-size:13px;
z-index:1;
overflow:hidden;
color:#00e9d9;
margin-bottom:25px;
}
<!-- CURRENT HTML -->
<div id="navigation">
<span class="title">KATERINA GRAHAM WORLD</span>
<i class="fa fa-home"></i> Homepage
<i class="fa fa-info-circle"></i> Information
<i class="fa fa-camera"></i> Photo Archive
<i class="fa fa-desktop"></i> Website
<i class="fa fa-align-left"></i> Online
</div>
Solved the issue. I didn't think it'd be necessary to create a styling for mobile screen sizes because I thought adding a max-device-width would tell the browser what I wanted 'cause I gave it a max. I should've been way more specific about it and making sure the code DOES have styling for smaller screen sizes zo I added this:
/*------------------------------------------
450px Media
------------------------------------------*/
#media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {
_#header {
background-color:#fff!important;
height:248px!important;
width:auto!important;
overflow:hidden!important;
}
.title {
padding:10px !important;
width:100% !important;
display:block;
}
#navigation a:link {
display: block;
margin: 3px;
padding: 10px !important;
}
#navigation a:active {
display: block;
margin: 3px;
padding: 10px !important;
}
#navigation a:visited {
display: block;
margin: 3px;
padding: 10px !important;
}
#navigation a:hover {
display: block;
margin: 3px;
padding: 10px !important;
}
}
Instead of entirely customising your container, customise the links as well.
E.g.
a {
padding:7px;
margin:0 8px;
color:#00e9d9;
background:#00e9d9
}
I think that you should refer to this answer on this previous question Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques
I really do recommend that you read a little about Design Fundamentals and also read about responsive web design. Here is a few articles to get you started: HTML Responsive Web (W3) and Responsive Web Design: What Is It and How To Use it (Smashing Magazine)
Designing a good, user-friendly responsive website takes time and planning. Personally I like to design each element at a time (e.g I'll design the generic desktop header element then redesign or tweak it for tablet and mobile. Then I'd do the same for the footer and site content.)