Custom CSS edges

[robertsLando]

I have added some style to draw edges instead of using font-awesome icons. Here an example and this is the style:

.edge {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    visibility: hidden;
}

.edge.verticalEdge, .edge.horizontalEdge {
    height: auto !important;
    width: auto !important;
}

.edge.verticalEdge{
  left: 46% !important;
}

.edge.horizontalEdge{
  top: 46% !important;
}

.edge.fa-chevron-right {
    visibility: visible;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.edge.fa-chevron-left {
    visibility: visible;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.edge.fa-chevron-up {
    visibility: visible;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.edge.fa-chevron-down {
    visibility: visible;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}