Replacing Twitter and Facebook links with icons?

Dinarius · 03-03-2015 12:19pm #1

On my new website, I have links set up to both my Twitter and Facebook accounts.

All you see on the screen on my site are the words Twitter and Facebook.

When you click on them you are taken to my accounts.

I'd like to replace these words with icons.

How do I do this?

Thanks.

D.

BrokenArrows · 03-03-2015 12:40pm

You just need to add the image to your href link in the HTML. www.echoecho.com/htmllinks06.htm

Graham · 03-03-2015 12:44pm

Dinarius wrote: »

On my new website, I have links set up to both my Twitter and Facebook accounts.

All you see on the screen on my site are the words Twitter and Facebook.

When you click on them you are taken to my accounts.

I'd like to replace these words with icons.

How do I do this?

Thanks.

D.

[HTML]
<a href="http://twitter.com/dinarius">
<img src="twitter.gif" alt="Twitter Link">
</a>
[/HTML]

Dinarius · 03-03-2015 3:08pm

This one is a bit trickier than the other two.

The way the web design template is set up, I have to input my @Twitter name in one part of the program, and then put it on the site page.

But, I can only input @Twitter into the template - nothing else.

If I right-click on to word Twitter on the website (which is the live link to my account) and choose Inspect Element, I can see the line beginning <a and ending ></a>.

I presume if I could now add in the <img.....etc. > bit I would be sorted. But, I don't seem to be able to edit this line.

My options at the top of this window are: Inspector (which shows me the line of code), Console, Debugger, Style Editor, Performance, Network.

Should I by trying to edit it in one of these?

Thanks.

D.

Dinarius · 03-03-2015 3:18pm

Ok.

Just discovered that if I select all of the code and right-click, there is an option to Edit as HTML.

Great. I can now input the text above.

But, what do I do after I've inputted it?

There is no X to close the box.

Thanks.

D.

Graham · 03-03-2015 3:21pm

It sounds like you're editing directly in the browser, what are you hoping is going to happen when you close the page?

Dinarius · 03-03-2015 3:28pm

Graham wrote: »

It sounds like you're editing directly in the browser, what are you hoping is going to happen when you close the page?

That the Twitter icon replaces the word Twitter on the page of the website.

Yes, I am editing directly in the browser.

I'm using one of the website templates from www.koken.me

You simply login and edit.

Thanks.

D.

Graham · 03-03-2015 3:45pm

I think (it's hard to be certain remotely) that you're confusing some of the Koken tools with the Chrome developer tools.

The right-click, edit as html sounds more like Chrome develop tools than anything else.

Have you tried saving your changes, moving to a different page then going back to view your changes?

Dinarius · 03-03-2015 4:07pm

Graham wrote: »

I think (it's hard to be certain remotely) that you're confusing some of the Koken tools with the Chrome developer tools.

The right-click, edit as html sounds more like Chrome develop tools than anything else.

Have you tried saving your changes, moving to a different page then going back to view your changes?

Graham,

I'm using Firefox.

I'm not sure if I'm saving the changes correctly.

In the Koken software, there is also the option of what they call Custom CSS. It's explained here> http://help.koken.me/customer/portal/articles/1033530-apply-custom-css-to-a-theme

Not sure if that is what I should be using.

Thanks again.

D.

BrokenArrows · 03-03-2015 4:18pm

Ok the Konen Custom Css option is for modifying your CSS on the website.

Right clicking on the page and selecting "Inspect Element" is just modifying the website on your computer. It is a feature of Firefox. It doesnt save the changes back to the website and are not visible to any other users. Any changes made using "Inspect Element" will be lost as soon as you refresh the page.

Graham · 03-03-2015 4:24pm

Dinarius wrote: »

Graham,

I'm using Firefox.

I'm not sure if I'm saving the changes correctly.

In the Koken software, there is also the option of what they call Custom CSS. It's explained here> http://help.koken.me/customer/portal/articles/1033530-apply-custom-css-to-a-theme

Not sure if that is what I should be using.

Thanks again.

D.

ok, sounds like you're just editing using the firefox developer tools.

If I'm correct, you're not really editing the web page at all. All you're doing is changing how that particular page looks in your browser on your PC until you close the page.

Dinarius · 03-03-2015 4:49pm

Thanks guys.

I installed Chrome.

I opened the CSS editor.

I chose Inspect Element for Twitter on the web page.

I copied and pasted the highlighted text into the CSS editor.

I then edited it so that it looked exactly like this <a title="Twitter" href="https://twitter.com/ConsumingIssues"><img src="twitter.gif" alt="Twitter Link"></a>

..and chose Publish Changes (what the software makes you do)

I then reloaded the pages.

No change.

Also, there is no "Matched CSS Rules", which they refer to in the help document, visible in the Chrome editor.

I must be close!

Thanks.

D.

Dinarius · 03-03-2015 4:54pm

Maybe I should choose Copy CSS path when I copy the highlighted text in Chrome?

But, then something totally different appears in the CSS editor.

#nav_third > ul > li:nth-child(5) > a

D.

Dinarius · 03-03-2015 4:57pm

Pps.

Right clicking the text in Chrome gives me the options of Edit attribute, Edit as HTML, Copy CSS path, Copy XP Path, Copy.

D.

Graham · 03-03-2015 5:16pm

You see all of those options in Chrome and Firefox, the ones that work on absolutely any webpage not just your web pages. You don't want to use those to edit your site. They're perfect for testing css changes but that's about it for your purposes.

Any changes you make using those tools won't save.

You need to go back to the Koken website and read the tutorials for editing content/html/css/themes/templates.

Dinarius · 04-03-2015 8:11am

Here is someone using the same Koken template (Madison 2) as me.

http://danalmasy.com/

Curiously, of all the photographers on their page of Madison examples here> https://store.koken.me/themes/madison/examples he is the only one who has inserted buttons for Twitter etc., instead of words.

Is it possible to tell how he did it?

Thanks.

D.

Graham · 04-03-2015 5:15pm

Dinarius wrote: »

Here is someone using the same Koken template (Madison 2) as me.

http://danalmasy.com/

Curiously, of all the photographers on their page of Madison examples here> https://store.koken.me/themes/madison/examples he is the only one who has inserted buttons for Twitter etc., instead of words.

Is it possible to tell how he did it?

Thanks.

D.

Nope

Looking it Koken, it appears the only way to do it is to change the theme or change the page template.

Replacing Twitter and Facebook links with icons?

Comments