Photo/Icon and Text Placement


(Aleshia Kiedaisch) #1

Hi there!

Still very new to this. :slight_smile: I’m just trying to figure out if there’s a way to fine-tune placement of text with images (photos or icons, etc). For example, here’s a link to a site I’m working on:
http://thepizzajoint.ca/Testing/
On the home page, I was trying to get the “Pizza by the Slice” text lined up nicely with the pizza icon. I wanted it just as you see it there. I tried a two column stack, a floating image stack…nothing let me fine-tune the positioning. What you see there is my solution…I created the entire block (icon and text) in Illustrator and placed it as an image. lol
I’m thinking there’s an easier way using actual text and stacks?
Here’s another example:
http://primaryeng.com/contact-us/burnaby/
See the little phone, envelope and person icons centred next to each line of info.
I hope this makes sense…

Thanks!


(Rob Beattie) #2

I’d probably use Big White Duck’s Header Pro stack (free, but make a donation) for the pizza one.

The phone looks as though it’s been done with Font Awesome. You can do this by hand using FA code in an HTML stack for free or buy one of the main listy type stacks to do it for you. I like Lister from Stacks4Stacks but there are plenty around.

Hope this helps


(Greg Schneck) #3

Be sure to check your work on multiple screen sizes also… what looks good on desktop can look poor on phones. For example, with your initial layout (image and text) you can put padding on top of your text with padding but if you have a responsive site and the page is viewed on a phone the text will break under the image (if setup properly) and you will have extra spacing between the image and text (due to the extra padding.) So some of these “alignments” are very difficult to do. I can’t image trying to do a responsive site without Stacks3 and the hundreds of available stacks.

If you are not using Stacks3 consider purchasing it today. There are many many stacks that let you fine tune margins and padding based on set numbers or percentages. I personally consider Stacks3 a mandatory add-on. To see what stacks can do here is a starting point: stacks4stacks That’s just one of the many many 3rd pary stacks developers.


(Aleshia Kiedaisch) #4

Oh for sure, I’m definitely using Stacks 3! Love it so far. :slight_smile: What you’re saying about padding and different screen sizers makes total sense. Funny enough, my icon and text PNG creation takes care of that issue!

As for Header Pro, I’ll definitely check it out! Now, Font Awesome…I don’t do code…but I’m not opposed to learning. Do you know of any good tutorials on how to use FA? Lister looks promising too, but if I could do it for free, I’d like to learn!


(Aleshia Kiedaisch) #5

I checked a little more into Font Awesome. Was a little confusing to me. Is it essentially a collection of icons in font form? Do you pay for it?

What’s the difference between using a Font Awesome icon rather than a PNG of an icon? Or is it that FA allows for ease of placing icons within text?

Total newb here…

Thank you!


(Aleshia Kiedaisch) #6

Here’s another example of icons next to text…I hope someone out there can help me…I’m completely lost! Thank you!


(Rob Beattie) #7

You can do that with Paragraph Pro from Big White Duck. Here’s a simple example. This is a powerful stack, well worth spending time getting to know because you’ll use it over and over again. Well worth the donation too.

Rob


(Aleshia Kiedaisch) #8

Perfect, thank you! Downloaded and donated. :slight_smile:


(system) #9

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.