Code for left and right arrows

Forum Moderators: not2easy

Message Too Old, No Replies

Code for left and right arrows

jpmmedia

2:53 pm on Dec 9, 2020 (gmt 0)

I am working on a slideshow and need the code for left and right arrows
Anyone know a list of all the available codes? For example,

.element {
display: inline-block;
content: "\00d7";
}

jpmmedia

2:56 pm on Dec 9, 2020 (gmt 0)

Edit, for this
.element::after {
display: inline-block;
content: "\00d7";
}
The content part

tangor

7:06 pm on Dec 9, 2020 (gmt 0)

@jpmmedia ... Welcome to Webmasterworld.

Old days I started here:
[w3schools.com...]
Then kept playing with it. :)

jpmmedia

7:14 pm on Dec 9, 2020 (gmt 0)

Yep, I learned that from there. A great work around.

coothead

8:36 pm on Dec 9, 2020 (gmt 0)

Hi there jpmmedia,

here is a "Character Entity" example...


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Character Entity Example</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
 background-color: #f0f0f0;
 font: normal 1em / 1.62em sans-serif;
 }
 #indicator1,
 #indicator2 {
 width: 10em; 
 padding: 0.25em 0;
 margin: 0.25em 0;
 border: 1px solid #999;
 border-radius: 0.4em;
 background-color: #fff;
 text-align: center;
 }
#indicator1::before {
 display: inline-block;
 margin-right: 0.3em;
 vertical-align: middle;
 font-size: 1.5em;
 content: '\02190';
 }
#indicator2::after {
 display: inline-block;
 margin-left: 0.3em;
 vertical-align: middle;
 font-size: 1.5em;
 content: '\02192';
 } 
</style>

</head>
<body>

 <div id="indicator1">Go this way</div>
 <div id="indicator2">Go this way</div>

</body>
</html>

Further reading:-

Character Entity Reference Chart [dev.w3.org]

birdbrain

jpmmedia

3:50 pm on Dec 10, 2020 (gmt 0)

Thank you good sir @coothead

coothead

5:29 pm on Dec 10, 2020 (gmt 0)

No problem, you're very welcome. ;)

birdbrain