score:1
you can use any svg icon and position it with css
just like any other element. i'm going to show you how i do it myself on my projects.
in the code below notice that i styled simbicon-arrow-dwn
with an inline svg just to make it possible running the code here. but in real life you place your icon in an img folder and call it by its url on the css class, just as it is commented in the code.
html, body {
width:100%;
background-color: #f2f2f2;
margin: 0 auto;
}
.navbar {
display: grid;
grid-template-columns: repeat(3, 1fr);
position: relative;
width: 100vw;
top: 0%;
background: #faa;
padding:7px;
box-shadow:0px 0px 15px rgba(55,55,55,0.3);
border-bottom:1px solid rgba(143, 77, 77, 0.5);
}
.left {
grid-column: 1/2;
position: relative;
height: 100%;
left:10px;
}
.right {
grid-column: 3/4;
position: relative;
display: flex;
justify-content: end;
height: 100%;
right:10px;
}
.center
{
grid-column: 2/3;
position: relative;
color:#555;
font-weight:700;
text-align: center;
justify-content: center;
align-items: center;
font-size: 18px;
display: flex;
}
.content {
padding:10px;
position: relative;
}
.a
{
text-decoration:none;
}
.div
{
position: relative;
background: #d4d4d4;
border: 1px solid #555;
border-radius: 5px;
padding: 7px;
margin: 5px;
display: flex;
justify-content: space-around;
vertical-align:center;
}
.divbar
{
position: relative;
background: none;
padding: 0px;
margin: 5px;
display: flex;
vertical-align:center;
}
.bar-in
{
position: absolute;
background: #007aff;
border-radius: 4.5px;
padding: 6px;
margin: -40.6px 0px 0px 5.5px;
height:23.1px;
display: flex;
justify-content: space-around;
vertical-align:center;
width:50%;
}
.bullet
{
position: absolute;
background: #007aff;
padding: 0px;
margin: 26.5px 0px 0px 275px;
width:7px;
height:35px;
vertical-align:center;
z-index:10;
}
.arrow
{
position: relative;
z-index:15;
left:246px;
}
.bar-text
{
z-index:20;
color:#ff0;
}
.icon
{
position: absolute;
left: 100%;
margin: 0px 10px 0px 10px;
top: -2px;
padding: 1px 5px;
}
i.icon {
display:inline-block;
vertical-align:middle;
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
position:relative
}
.simbicon-arrow-dwn {
/* background-image: url(../img/arrow-dwn.svg); */
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 580 580'><path d='m 290.13492,532.3945 71.009759,305.7913 196.86078,284.75211 l 7.42417,-184.08764 172.60377,0.70541 6.71876,183.38223 125.44846,23.47931 z' fill='%23007aff'/></svg>");
bottom:0;
width:36px;
height:36px
}
.simbicon-arrow-dwn-small {
/* background-image: url(../img/arrow-dwn.svg); */
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 580 580'><path d='m 290.13492,532.3945 71.009759,305.7913 196.86078,284.75211 l 7.42417,-184.08764 172.60377,0.70541 6.71876,183.38223 125.44846,23.47931 z' fill='%23007aff'/></svg>");
bottom:0;
width:16px;
height:16px;
}
<!doctype html>
<html class="with-statusbar-overlay" lang="es"><head><meta charset="utf-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=5, user-scalable=yes, width=device-width">
</head>
<body>
<div class="navbar">
<div class="left">
<i class="icon simbicon-arrow-dwn" style="left:0px;"></i>
</div>
<div class="center">title</div>
<div class="right">
<i class="icon simbicon-arrow-dwn" style="left:0px;"></i>
</div>
</div>
<div class="content">
<a href="#">
<div class="div">here is a svg icon
<i class="icon simbicon-arrow-dwn" style="left:10%;"></i>
</div>
</a>
<a href="#">
<div class="div">
<i class="icon simbicon-arrow-dwn" style="left:0px;"></i>
here is another svg icon
</div>
</a>
<a href="#">
<div class="div">yet another
<i class="icon simbicon-arrow-dwn" style="left:10px;"></i>
svg icon
</div>
</a>
<br/><br/><br/>
<div class="divbar">
<div class="arrow"><i class="icon simbicon-arrow-dwn-small" style="left:10px;"></i></div>
<div class="bullet"></div>
</div>
<div class="div"><b class="bar-text" >this is the bar</b>
</div>
<div class="bar-in">
</div>
</div>
</body>
</html>
now you can see how the last bar is just what you showed on the question.
if you say that the bar .bar-in (here in blue) will dynamically change its with and .bullet will change its position accordingly, it will be changed by a script. so, if you make that script to dynamically change the left:246px value of .arrow to proportionally change when the with of .bar-in changes and the **margin: 26.5px 0px 0px 275px; (275px (margin-left)) of .bullet also changes then .arrow will always follow .bullet to any position it takes along the bar.
this is a screen shot of a js file i'm using in an app. as you can see javascript is handling a piece of html and css just to control how and where this elements are shown in the app. if you manage to create such an implementation in your script, or find where it handles the bullet and the target marker if you are using a third party code, then it would be easy for you to simply substitute the default image for the one of your choice. or even create it on the given case the script is just using a colored div just as i did for the blue .bar-in and .bullet.
the screenshot:
here the same js is handling an svg which i changed because previously it was a png.
Source: stackoverflow.com
Related Query
- How to set the target of highcharts bullet chart using SVG?
- How to display the value instead of percentage in a pie chart using jquery Highcharts
- Highcharts Bar Chart - How to set the minimum bar width/length
- How set options from HIGHCHARTS in a chart using vue chartkick
- How can I make milestone lines with a GANTT chart using the highcharts library?
- How do I set the margin to bottom of a chart in HighCharts to zero?
- How to show circular progress pie chart using the highcharts
- How to set brightness effects on specific columns on the stacked column/bar chart when using Highcharts?
- HighCharts Bullet Chart display data label of the target
- How to implement similar line chart using the Highcharts library?
- How to create a column range chart in Highcharts using range and navigator functions?
- How to set Highcharts chart maximum yAxis value
- how to set the interval of points on Y - Axis highcharts
- How do you increase the performance of highcharts chart creation and rendering
- Highcharts - How to set custom colors for the series
- Using Highcharts and displaying a message over or on the chart when there is no data
- How to set the z-index of points on a HighCharts scatter plot?
- how to get svg of highcharts using div id?
- How get data name in Highcharts pie chart legend instead of "Slice" using array of values?
- Highcharts (Highstock) how to manually set the navigator selected range
- How do I set the background color of a Highcharts HTML label?
- Highcharts Bubble Chart - How to move an individual point's data label (dataLabel) to the front/top
- How To Dynamically Truncate The Y-Axis Title On Chart Resize/Reflow In Highcharts
- highcharts pie monochrome: how to set the default color?
- Highcharts - how to set custom content in point tooltip (popup) on 3D scatter chart or how to customize point tooltip information?
- Highcharts visualizes chart data incorrectly after zooming or using the navigator
- How to set 'lang' property in Highcharts using Angular JS?
- How to draw the below chart using highchart?
- how to display 2 same highcharts without duplicate the code
- How to re-create the same chart in Highcharts as seen on the mock?
More Query from same tag
- Changing chart type give: Uncaught TypeError: Cannot read property 'length' of undefined Highcharts
- Ajax series data in Highcharts
- sorting categories in a highcharter stacked column chart
- Showing a value as DataLabel in HighCharts
- Dynamically setting xAxis rotation in high charts API
- Rails Highcharts Heatmap
- trouble embeding highcharts in a html php page
- Highcharts series not loading
- How To Show Tooltip In Sparkline Chart From Code
- How to call a JS function every 10 sec which then activates a function in angular
- Highchart yAxis Values
- Highchart how to animate from the xaxis bottom line upward
- How to create a chart with X and Y as strings?
- Highcharts | Custom plotOptions->series->dataLabels
- Scrape Highcharts data to CSV file
- Highcharts x-range series. How to crop label inside data?
- Synchronize multiple chart's x-axis
- How can I create a horizontal stacked bar chart with labels on the bars themselves as well as labels above the bars?
- Making a graph in php, mysql with highcharts
- HighStock change tickPositions for Axis dynamically
- Mixed series type with 'rallychart' component
- Remove the categories text under the bars on Highcharts chart
- Display the Plotted value on x axis using highcharts
- HighMap data table not loading points
- Highcharts: How to extend the x axis beyond the last column
- Fixed width Font Awesome in HighCharts tooltip
- Highcharts will not render if element in series data is empty
- Scale graph in angular
- R shiny Highcharts tooltip: adding average as extra variable
- High charts Donut Chart not rendering