Hi,

I would like to add to my website instructions for users and would be grateful if someone could Email me images of the four icons (envelope, bell, head & shoulders, cogwheels)that appear at the top of the website or place them here so that I can copy them. I'm having trouble finding the same ones we use online.

Thanks

Those are actually FONTS. Here's some sample code that CC uses (there's more to exactly dup, but this code is simple)

Copy this and put in Editor SOURCE mode on a page and you'll see. If you want to separate them, put the "style" around each one before a description.

Change the font-size to whatever you want. Also the color, but not white.

<p style="color:gray; font-size:30px"> <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-bell fa-fw"></i> <i class="fa fa-user fa-fw"></i> <i class="fa fa-cogs fa-fw"></i></p>

You could also just zoom the page and use the print-screen function or snipping tool to copy the screen at that position, then use a graphic editing program to crop each image to become a separate graphic.

Many thanks, Jack.

Silly me, Kyle. I hadn't even thought of that. Thanks.

Taking an actual graphic shot from a page is actually harder than it looks. You have to make the background "transparent" so it doesn't look odd in text. Unless you are happy with 'blue' surround.

Plus the final steps are much longer. You have to upload the images, then create "img" html, etc.

It's much simpler to literally replicate what actually a font.

Here's one I made that replicates your page exactly (I just picked raw "blue". Change font size to whatever. If you want individual ones, separate into sections. But that's where the editor gets weird and weirder. And pure html mode is not exactly your friend

Sample Page HERE

Images somebody already made HERE View the image and then save if you do not want to register. If you register, you can change the color online and edit the color directly if you want. Then upload images.

Sample code on demo page. CC Editor has a BIG bug here it removes li code and does not do preview correctly either.

<style type="text/css">.faiconFont {font-size:34px; color: white; background:blue; } </style> <div class="faiconFont">  <p class="fa fa-envelope"> Envelope</p>   <p class="fa fa-bell"> Bell</p>   <p class="fa fa-user"> Person</p>   <p class="fa fa-cogs"> Options</p> </div> <p> </p>

Jack, you'll have to forgive my ignorance but I've separated the images and removed the text but don't know how to shorten the blue background so that it doesn't stretch across the whole page but appears as a background behing the image only. Can you guide me please?

Thanks

The CC editor pretty much makes this a nogo as far as changes since that requires more CSS. I thought you could use the "text" next to the symbols to use when referencing the symbols. IOW, use that text (like ENVELOPE) as a heading in simple text referencing the "names" you have the symbols.

To make it so the editor doesn't go crazy (it literally deletes things if you make a tiny mistake), I suggest to use the link to the actual images. IOW, use the "img" html. That also presents some issue as far as lining up text easily. Normally what people do is put the image and then the text goes below. It doesn't have to be that way with more CSS codes. You can see our Bothell History pages to see an example.

However, you can use "tables", its just that those are not as friendly for Responsive Design.

Go to the site I listed above, sign up, then edit the 'font' character to the color you want (white = F0F0F0 there" then save it to your computer and upload to your file vault.

Here's one I stored on our site (envelope) and the code to display the envelope.

<img src="/000/7/7/0/13077/userfiles/file/buttons/envelope.png" style="background-color:blue" />

See earlier link for how that looks on same sample page.

Thanks again, Jack. I've just seen your additional post. Yet again I didn't receive a notification for it so I thought I'd take a look just in case.

I only wanted to lose some of the background as it didn't fit in with what I originally planned but I'll work around in now.

The only way to see new message reliably on this forum is to click "What's New" OR make a book mark to 'what's new' and just click that on your browser. Has pretty much been that way forever.

If the CC editor didn't literally wipe out the code that would make it work, I'd post it. I tried. Fairly easy to do, however, saving it destroyed it completely. Really weird stuff. Wish Editor would just simply LEAVE STUFF alone -

If you use tables you can add a background to cells too and put the image(s) inside of each one. Then use the cell to the right to type in text.

In the end, Jack, I found it easier to do as Kyle said and use the snipping tool which, if you've never had to use it, allows you to crop your chosen image/piece easily. I was able to crop the images from the website to more or less the same size and have added them to my Using This Site page and to the Home Page as it seems that some of my much older members thought the images were just for decorative effect!

Thanks, again, for your efforts.

Cutting it from the existing page works well for your site, but not for anyone that has an actual background image. Would be a lot of work for our page fixing the background.

I didn't know what you wanted to do in the end. The red circle concept is a very nice touch.

If the "snipped" image is transparent where the 'blue' is now, can make it more flexible since it becomes easy to use in different ways with exactly the same image.

That was my original reason for not using "snipped", plus the background issue. It's one more step that I was trying to avoid for you.

Using the icon as transparent you can vary the size of the surround (or the image) very easily. This can make it stand out more.

Here's the code (sample page shows YOUR output) with a surround and I changed the background (not the image) to show how that works. Border is optional. You already had a "border" in the original image, so the border I used is just an example. Actual image for your text did not use the 'border' so I could duplicate your positioning.
<img src="/000/7/7/0/13077/userfiles/file/buttons/envelope1.png" style="background-color: green; border-width: 8px; border-style: solid; border-color:green;" />

I'm beginning to think there may be a problem with the way I've done things. My site is taking an age to connect and load since I added the snipped images to the Home Page.

Any thoughts as to whether there might be a connection or is it just coincidental and there's a problem at CC's end?

For the last 24 hours, our servers have been plagued by slow response times. We are aware of the issue and are working to correct this as soon as possible. The slow response time does not have anything to do with your code.

Thanks for the swift reply. That sets my mind at rest. I can sleep easy now. Goodnight.