Changing icons with CSS / part II



  • @goldnoway The better question is: How do you get the path? Click on "Original file", inspect and copy the path. Resizing with pure css can be done by scaling.



  • @luetage Yup, already understood that, but I don't know how to scale svg at the moment.





  • Thanks! Did that:

    .bookmarks svg path {
    	d: path('m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z');
    transform: scale(0.48,0.48) translate(3px,4px);
    	
    }
    
    .button-addressfield.bookmark svg path {
        d: path('m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z'); transform: scale(0.34,0.34);
    

    preview

    I'll make sure to post there if I find other nice svg 🙂



  • My latest changes to the toolbar:

    button.button-toolbar.back svg path {
    d: path("M 19.477778,22.044444 17.522222,24 6.522222,13 17.522222,2 19.477778,3.9555556 10.677778,13 Z");
    fill: var(--colorBg);
    }
    
    button.button-toolbar.back:hover svg path {
    d: path("M 19.477778,22.044444 17.522222,24 6.522222,13 17.522222,2 19.477778,3.9555556 10.677778,13 Z");
    fill: var(--colorFg);
    }
    
    button.button-toolbar.rewind:hover svg path {
    fill: var(--colorFg);	
    }
    
    button.button-toolbar.forward svg path {
    d: path("M 6.522222,22.044444 8.477778,24 19.477778,13 8.477778,2 6.522222,3.9555556 15.322222,13 Z");
    fill: var(--colorBg);
    }
    
    button.button-toolbar.next:hover svg path {
    fill: var(--colorFg);	
    }
    
    button.button-toolbar.forward:hover svg path {
    d: path("M 6.522222,22.044444 8.477778,24 19.477778,13 8.477778,2 6.522222,3.9555556 15.322222,13 Z");
    fill: var(--colorFg);
    }
    
    .toolbar-addressbar button.button-toolbar.home::after {
    	content: " Build: 2.1.1337.20 ";
    	font-weight: bold;
    	padding-left: 3px;
    	padding-right: 3px;
    	color: var(--colorBg);
    }
    .toolbar-addressbar button.button-toolbar.home:hover::after {
    	content: " Build: 2.1.1337.20 ";
    	font-weight: bold;
    	padding-left: 3px;
    	padding-right: 3px;
    	color: var(--colorFg);
    }
    

    0_1540344932612_1ffbb848-eadd-42b3-891c-d35669be77fe-image.png

    Note: You have to change the version number manually.



  • @luetage you inspired me with the "Sthomehenge" icon meaning (bridge). What about this?
    Note: You have to put the code into one line.

    M0 16c1 0, 3 -1, 4 -4c1 -3, 6 -5, 7 -5
    c1 -0.25, 3 -0.25, 4 0
    c1 0, 6 2, 7 5c1 3, 3 4, 4 4
    
    v1h-5
    v-3c0 -3, -4 -3, -4 0v3
    h-1v-5c0 -4, -6 -4, -6 0v5h-1
    v-3c0 -3, -4 -3, -4 0v3
    h-5v-1z
    

    Now something for Christmas:

    M13 1l5 6h-2l4 6h-3l5 6h-3l5 6h-22l5 -6h-3l5 -6h-3l4 -6h-2l5 -6z
    

    And an arrow (meaning: quick way to home):

    M0 0l8 3l-4.5 0
    l15 15
    h4l0.5 0.5h-4l0.5 0.5
    h4l0.5 0.5h-4l0.5 0.5
    h4l0.5 0.5h-4l0.5 0.5
    h4l0.5 0.5h-4l0.5 0.5
    -0.5 0.5
    l-0.5 -0.5v4l-0.5 -0.5v-4
    l-0.5 -0.5v4l-0.5 -0.5v-4
    l-0.5 -0.5v4l-0.5 -0.5v-4
    l-0.5 -0.5v4l-0.5 -0.5v-4
    l-15 -15
    l0 4.5l-3 -8z
    

    And results:
    Home button icons



  • Very festive!



  • Merry Christmas and a happy new year to one and all.

    0_1544017522734_santa.png

    /********************************************************************Home icon*******/
    
    button.button-toolbar.home svg path {
        d: path('M275.483,352.268c-0.265,0.256-6.69,6.135-19.482,6.135c-
    
    12.945,0-19.396-5.734-19.823-6.127     c-3.354-3.243-8.678-3.217-
    
    11.981,0.094c-3.337,3.328-
    
    3.337,8.73,0,12.066c1.126,1.126,11.614,11.034,31.804,11.034     
    
    c19.849,0,30.336-9.907,31.462-11.034c3.294-3.294,3.285-8.576,0.051-
    
    11.921C284.264,349.171,278.897,349.085,275.483,352.268zM110.764,204.80
    
    4h290.133c14.114,0,25.6-11.486,25.6-25.6v-17.067c0-11.554-7.697-21.342-
    
    18.219-24.516     c-1.758-8.755-6.11-25.344-15.616-43.554l1.801-
    
    0.418c4.591-1.067,7.45-5.649,6.391-10.24c-1.067-4.591-5.692-7.424-10.24-
    
    6.391     l-7.134,1.655c-10.675-15.761-25.557-31.479-46.447-43.418c-4.096-
    
    2.338-9.301-0.913-11.639,3.174     c-2.338,4.096-
    
    0.913,9.31,3.174,11.648c55.142,31.505,63.778,95.394,63.863,96.043c0.529,4
    
    .267,4.164,7.484,8.465,7.484     
    
    c4.71,0,8.533,3.823,8.533,8.533v17.067c0,4.702-3.823,8.533-
    
    8.533,8.533H110.764c-4.702,0-8.533-3.831-8.533-8.533v-17.067     c0-
    
    4.71,3.831-8.533,8.533-8.533h256c4.719,0,8.533-3.823,8.533-8.533c0-4.719
    
    -3.814-8.533-8.533-8.533H119.682     c3.942-56.96,47.846-119.467,161.92-
    
    119.467c82.057,0,126.507,24.934,145.016,38.904c-10.121,5.931-
    
    17.016,16.802-17.016,29.363     
    
    c0,18.816,15.309,34.133,34.133,34.133s34.133-15.317,34.133-34.133c0-
    
    17.425-13.167-31.676-30.046-33.724     
    
    C437.019,40.682,389.6,0.004,281.602,0.004c-87.159,0-175.044,42.769-
    
    179.174,138.035c-10.018,3.482-17.263,12.911-17.263,24.098     
    
    v17.067C85.164,193.318,96.642,204.804,110.764,204.804z 
    
    M443.735,68.27c9.412,0,17.067,7.654,17.067,17.067     c0,9.412-
    
    7.654,17.067-17.067,17.067c-9.404,0-17.067-7.654-17.067-
    
    17.067C426.668,75.925,434.331,68.27,443.735,68.27zM300.93,347.302c1.32
    
    3,1.348,3.012,3.814,4.804,6.426c7.202,10.479,20.599,30.003,46.66,21.299     
    
    c4.471-1.485,6.886-6.323,5.393-10.795c-1.493-4.463-6.272-6.895-10.795-
    
    5.393c-12.937,4.326-18.893-2.714-27.187-14.78     c-2.227-3.234-4.326-
    
    6.289-6.673-8.695c-10.906-11.119-22.033-19.627-57.301-19.627s-
    
    46.404,8.508-57.301,19.627     c-2.765,2.825-5.205,6.571-7.791,10.547c-
    
    8.431,12.937-11.802,15.718-16.427,13.389c-4.224-2.116-9.344-0.393-
    
    11.452,3.814     c-2.108,4.215-
    
    0.401,9.344,3.823,11.452c3.772,1.886,7.287,2.696,10.53,2.696c13.474,0,22.5
    
    02-13.858,27.827-22.042     c2.108-3.243,4.105-6.298,5.683-7.919c7.313-
    
    7.458,14.208-14.498,45.107-
    
    14.498S293.625,339.844,300.93,347.302zM196.268,247.47c0,4.71,3.823,8.53
    
    3,8.533,8.533c4.719,0,8.533-3.823,8.533-8.533h8.533c4.719,0,8.533-
    
    3.823,8.533-8.533     c0-4.719-3.814-8.533-8.533-8.533h-34.133c-4.71,0-
    
    8.533,3.814-
    
    8.533,8.533c0,4.71,3.823,8.533,8.533,8.533H196.268zM511.396,500.296l-
    
    17.357-43.315c-20.591-41.165-64.196-47.232-108.51-47.369c8.687-
    
    31.334,8.764-65.493-1.033-93.995     c4.173-12.843,6.187-21.333,7.159-
    
    26.65c10.394-3.26,17.946-12.979,17.946-24.431v-34.133c0-4.719-3.814-
    
    8.533-8.533-8.533     c-4.71,0-8.533,3.814-8.533,8.533v34.133c0,4.702-
    
    3.823,8.533-8.533,8.533c-4.591,0-8.363,3.78-8.533,8.371     c0,0.077-
    
    0.384,8.448-8.09,31.59c-0.205,0.623-0.23,1.28-0.299,1.929c-0.017,0.239-
    
    0.145,0.444-0.145,0.683     c0,0.111-2.176,10.991-27.836,17.408c-
    
    4.582,1.143-7.364,5.777-6.212,10.351c0.964,3.874,4.446,6.468,8.269,6.468    
    
     c0.683,0,1.382-0.085,2.074-0.256c13.961-3.49,23.074-8.448,29.107-
    
    13.5c7.398,36.685-0.99,80.128-22.63,111.283     c-15.07,21.683-
    
    43.554,47.539-93.705,47.539c-50.492,0-79.07-26.01-94.148-47.821c-21.504-
    
    31.104-29.747-74.368-22.289-110.882     
    
    c5.99,5.018,15.027,9.924,28.86,13.38c0.7,0.171,1.391,0.256,2.082,0.256c3.8
    
    23,0,7.296-2.594,8.269-6.468     c1.143-4.574-1.638-9.208-6.212-10.351c-
    
    25.199-6.298-27.375-16.836-27.494-17.621c-0.017-0.307-0.162-0.563-0.205-
    
    0.862     c-0.068-0.512-0.06-1.033-0.23-1.536c-7.68-23.031-8.09-31.428-
    
    8.098-31.428c0-4.719-3.814-8.533-8.533-8.533     c-4.702,0-8.533-3.831-
    
    8.533-8.533v-34.133c0-4.719-3.814-8.533-8.533-8.533c-4.71,0-8.533,3.814-
    
    8.533,8.533v34.133     
    
    c0,11.452,7.56,21.171,17.954,24.431c0.973,5.316,2.978,13.798,7.151,26.633
    
    c-9.924,28.467-9.924,62.66-1.271,94.02     c-44.228,0.154-87.723,6.272-
    
    108.552,48.009L0.616,500.296c-1.758,4.378,0.375,9.344,4.753,11.093     
    
    c1.041,0.418,2.108,0.614,3.166,0.614c3.388,0,6.588-2.031,7.927-
    
    5.367l16.776-42.018c13.653-27.307,40.226-37.948,94.763-37.948     
    
    c1.289,0,2.483-0.333,3.576-
    
    0.845c4.301,11.051,9.702,21.538,16.239,30.993c17.399,25.173,50.304,55.18
    
    5,108.186,55.185     c57.532,0,90.325-29.841,107.716-54.869c6.656-
    
    9.574,12.16-20.215,16.512-31.445c1.152,0.58,2.398,0.981,3.772,0.981     
    
    c54.545,0,81.118,10.641,94.481,37.299l17.067,42.667c1.331,3.337,4.54,5.36
    
    7,7.919,5.367c1.058,0,2.133-0.196,3.166-0.614     
    
    C511.012,509.64,513.145,504.673,511.396,500.296zM324.268,230.404h-
    
    34.133c-4.71,0-8.533,3.814-
    
    8.533,8.533c0,4.71,3.823,8.533,8.533,8.533h8.533     
    
    c0,4.71,3.823,8.533,8.533,8.533c4.719,0,8.533-3.823,8.533-
    
    8.533h8.533c4.719,0,8.533-3.823,8.533-8.533     
    
    C332.802,234.218,328.987,230.404,324.268,230.404z');
        transform: scale(0.05,0.05) !important;
        transform-origin: 5% 5%;
    }
    
    button.button-toolbar.home {
        fill: #e60000 !important;
    }
    

    Regards
    Raed



  • Hello,
    Alternative forward and backward buttons:

    0_1544092895869_Untitled.png

    /*******************************************************Forward and back icons*******/
    
    button.button-toolbar.back svg path {
        d: path('M205.85 105.85C211.61 100.13 220.17 98.41 227.65 101.53C235.13 104.61 240.01 111.93 240.01 120.01C240.01 129.35 240.01 176.01 240.01 260.01C468 260.01 594.67 260.01 620 260.01C631.04 260.01 640 268.97 640 280.01C640 288.01 640 352.01 640 360.01C640 371.05 631.04 380.01 620 380.01C594.67 380.01 468 380.01 240.01 380.01C240.01 464.01 240.01 510.67 240.01 520.01C240.01 528.09 235.13 535.41 227.65 538.49C225.21 539.49 222.57 540.01 220.01 540.01C214.81 540.01 209.69 537.97 205.85 534.17C185.85 514.17 25.85 354.17 5.85 334.17C-1.95 326.33 -1.95 313.69 5.85 305.85C45.85 265.85 185.85 125.85 205.85 105.85Z');
        transform: scale(0.035,0.035) !important;
        transform-origin: 10% 10%;
    }
    
    button.button-toolbar.back {
        fill: #339933 !important;
    }
    
    button.button-toolbar.forward svg path {
        d: path('M434.15 105.85C428.39 100.13 419.83 98.41 412.35 101.53C404.87 104.61 399.99 111.93 399.99 120.01C399.99 129.35 399.99 176.01 399.99 260.01C172 260.01 45.33 260.01 20 260.01C8.96 260.01 0 268.97 0 280.01C0 288.01 0 352.01 0 360.01C0 371.05 8.96 380.01 20 380.01C45.33 380.01 172 380.01 399.99 380.01C399.99 464.01 399.99 510.67 399.99 520.01C399.99 528.09 404.87 535.41 412.35 538.49C414.79 539.49 417.43 540.01 419.99 540.01C425.19 540.01 430.31 537.97 434.15 534.17C454.15 514.17 614.15 354.17 634.15 334.17C641.95 326.33 641.95 313.69 634.15 305.85C594.15 265.85 454.15 125.85 434.15 105.85Z');
        transform: scale(0.035,0.035) !important;
        transform-origin: 10% 10%;
    }
    
    button.button-toolbar.forward {
        fill: #339933 !important;
    }
    
    

    Change

    fill: #339933 !important;
    

    the fill value to change the icon color (hex value).

    Or remove the following completely for native icon colors.

    button.button-toolbar.forward {
        fill: #339933 !important;
    }
    

    Change

        transform-origin: 10% 10%;
    

    values to change icon position to your liking.

    Regards
    Raed



  • I see, you use mine reload button
    bigsmile
    0_1544095582596_19f17017-225b-4af2-9198-87060e1fd15f-image.png



  • Alternative reload button:

    0_1544113999894_00.png

    /********************************************************************Reload icon*******/
    
    button.button-toolbar.reload svg path {
        d: path('m 352.487,193.561 -61.75,99.141 c -2.184,3.506 -5.469,5.516 -9.013,5.516 -3.538,0 -6.815,-2.004 -8.992,-5.5 l -61.748,-99.156 c -2.244,-3.6 -2.549,-7.433 -0.837,-10.516 1.706,-3.073 5.104,-4.836 9.321,-4.836 h 43.697 c 0.003,-0.333 0.011,-0.666 0.011,-1 0,-62.782 -51.077,-113.859 -113.859,-113.859 -62.782,0 -113.859,51.077 -113.859,113.859 0,62.782 51.078,113.859 113.86,113.859 19.29,0 38.341,-4.907 55.094,-14.19 8.563,-4.746 19.355,-1.648 24.101,6.915 4.746,8.564 1.65,19.355 -6.915,24.101 -21.998,12.189 -46.992,18.632 -72.28,18.632 C 66.984,326.528 1.8273937e-7,259.544 1.8273937e-7,177.21 1.8273937e-7,94.876 66.984,27.892 149.318,27.892 c 82.334,0 149.318,66.984 149.318,149.318 0,0.334 -0.009,0.666 -0.011,1 h 45.378 c 4.217,0 7.614,1.762 9.32,4.835 1.711,3.084 1.406,6.917 -0.836,10.516 z');
        transform: scale(0.07,0.07) !important;
    }
    

    Regards
    Raed



  • The arrow collection grows:
    Rewind (only doubled back):

    M0 7l8 -3.875, -3.5 3.5h12.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5v0.75l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-12.5l3.5 3.5, -8 -3.875zM0 19l8 -3.875, -3.5 3.5h12.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5v0.75l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-12.5l3.5 3.5, -8 -3.875z
    

    Back:

    M0 13l8 -3.875, -3.5 3.5h12.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5v0.75l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-12.5l3.5 3.5, -8 -3.875z
    

    Forward (reversed back):

    M26 13l-8 -3.875, 3.5 3.5h-12.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5v0.75l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h12.5l-3.5 3.5, 8 -3.875z
    

    Next (doubled forward):

    M26 7l-8 -3.875, 3.5 3.5h-12.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5v0.75l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h12.5l-3.5 3.5, 8 -3.875zM26 19l-8 -3.875, 3.5 3.5h-12.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5h-0.5l-3.5 -3.5h-0.5l3.5 3.5v0.75l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h0.5l-3.5 3.5h0.5l3.5 -3.5h12.5l-3.5 3.5, 8 -3.875z
    

    For rew. and next I use also this mod:

    .toolbar-addressbar.toolbar .button-toolbar.rewind, .toolbar-addressbar.toolbar .button-toolbar.next { min-width: 34px !important; }
    

    And Home (because arrow wasn't the best choice among arrows):

    M6 6c1 2 1 12 0 14c2 -1 12 -1 14 0c-1 -2 -1 -12 0 -14c-2 1 -12 1 -14 0zm1 1c2 1 10 1 12 0c-1 2 -1 10 0 12c-2 -1 -10 -1 -12 0c1 -2 1 -10 0 -12zm12 0c14 1 -1 -14 0 0m0 12c-1 14 14 -1 0 0m-12 0c-14 -1 1 14 0 0m0 -12c1 -14 -14 1 0 0zm13 -1c-0.5 -9.5 9.5 0.5 0 0m0 14c9.5 -0.5 -0.5 9.5 0 0m-14 0c0.5 9.5 -9.5 -0.5 0 0m0 -14c-9.5 0.5 0.5 -9.5 0 0z
    

    Result:
    Navigation Icons
    Btw. can anybody tell me how domain navigation buttons (rew., next) work? I'll be maybe able to get better icons for them.



  • @potmeklecbohdan said in Changing icons with CSS / part II:

    Btw. can anybody tell me how domain navigation buttons (rew., next) work? I'll be maybe able to get better icons for them.

    Change svg path on the following to the path of icons of your choice:

    button.button-toolbar.rewind svg path {
        d: path('M205.85 105.85C211.61 100.13 220.17 98.41 227.65 101.53C235.13 104.61 240.01 111.93 240.01 120.01C240.01 129.35 240.01 176.01 240.01 260.01C468 260.01 594.67 260.01 620 260.01C631.04 260.01 640 268.97 640 280.01C640 288.01 640 352.01 640 360.01C640 371.05 631.04 380.01 620 380.01C594.67 380.01 468 380.01 240.01 380.01C240.01 464.01 240.01 510.67 240.01 520.01C240.01 528.09 235.13 535.41 227.65 538.49C225.21 539.49 222.57 540.01 220.01 540.01C214.81 540.01 209.69 537.97 205.85 534.17C185.85 514.17 25.85 354.17 5.85 334.17C-1.95 326.33 -1.95 313.69 5.85 305.85C45.85 265.85 185.85 125.85 205.85 105.85Z');
        transform: scale(0.030,0.030) !important;
        transform-origin: 10% 15%;
    }
    
    button.button-toolbar.next svg path {
        d: path('M434.15 105.85C428.39 100.13 419.83 98.41 412.35 101.53C404.87 104.61 399.99 111.93 399.99 120.01C399.99 129.35 399.99 176.01 399.99 260.01C172 260.01 45.33 260.01 20 260.01C8.96 260.01 0 268.97 0 280.01C0 288.01 0 352.01 0 360.01C0 371.05 8.96 380.01 20 380.01C45.33 380.01 172 380.01 399.99 380.01C399.99 464.01 399.99 510.67 399.99 520.01C399.99 528.09 404.87 535.41 412.35 538.49C414.79 539.49 417.43 540.01 419.99 540.01C425.19 540.01 430.31 537.97 434.15 534.17C454.15 514.17 614.15 354.17 634.15 334.17C641.95 326.33 641.95 313.69 634.15 305.85C594.15 265.85 454.15 125.85 434.15 105.85Z');
        transform: scale(0.030,0.030) !important;
        transform-origin: 10% 15%;
    }
    

    Change transform: scale values to suite size of your chosen icon:

        transform: scale(0.030,0.030) !important;
    

    Change values of transform-origin to position icon to your liking:

        transform-origin: 10% 15%;
    

    Regards
    Raed



  • @raed I'm not talking about the icons, but about the functionality of the buttons.



  • @potmeklecbohdan

    This is the wrong thread for such a request, you have a better chance of input if you start a new topic.
    Regards
    Raed



  • @potmeklecbohdan The rewind button goes back to where you started. This means it functions as if you were pressing the back button repeatedly until you arrive at the first page you visited on the current domain. The next button goes to a page not present in history. In Vivaldi Forum this would be the next page in a topic or in category overview. Next doesn't work reliably on Vivaldi Forum though.



  • Hello,
    Alternative Home button:

    0_1544807318563_aa.png

    /********************************************************************Home icon*******/
    
    button.button-toolbar.home svg path {
        d: path('M503.402,228.885L273.684,19.567c-10.083-9.189-25.288-9.188-35.367-0.001L8.598,228.886c-8.077,7.36-10.745,18.7-6.799,28.889c3.947,10.189,13.557,16.772,24.484,16.772h36.69v209.721c0,8.315,6.742,15.057,15.057,15.057h125.914c8.315,0,15.057-6.741,15.057-15.057V356.932h74.002v127.337c0,8.315,6.742,15.057,15.057,15.057h125.908c8.315,0,15.057-6.741,15.057-15.057V274.547h36.697c10.926,0,20.537-6.584,24.484-16.772C514.147,247.585,511.479,236.246,503.402,228.885zM445.092,42.73H343.973l116.176,105.636v-90.58C460.149,49.471,453.408,42.73,445.092,42.73z');
        transform: scale(0.038,0.038) !important;
        transform-origin: 10% 10%;
    }
    
    button.button-toolbar.home {
        fill: #800080 !important;
    }
    

    Another variation:

    0_1544914744313_000.png

    /********************************************************************Home icon*******/
    
    button.button-toolbar.home svg path {
        d: path('m 26.232461,291.97873 c -0.29105,-0.12038 -0.82683,-0.53913 -1.19063,-0.93055 l -0.66146,-0.71168 -0.0541,-35.63137 -0.0541,-35.63132 27.48011,-24.30322 c 15.11405,-13.36678 27.54588,-24.32053 27.62629,-24.34167 0.0804,-0.0211 12.52862,10.91531 27.662699,24.30322 l 27.5165,24.34167 0.0108,35.41335 c 0.01,32.91621 -0.021,35.46727 -0.4406,36.17754 -0.94885,1.60627 -0.44648,1.56645 -19.76307,1.56645 H 96.743951 v -15.75584 c 0,-17.48682 0.0482,-16.99233 -1.72887,-17.73484 -1.38422,-0.57837 -29.96015,-0.55535 -31.18339,0.0251 -1.81397,0.86079 -1.74816,0.19457 -1.74816,17.69754 v 15.76803 l -17.66093,-0.0168 c -9.71352,-0.009 -17.89907,-0.11527 -18.19011,-0.23565 z M 5.049221,217.60861 c -2.1737,-2.46973 -3.95218,-4.59573 -3.95218,-4.72444 0,-0.38288 77.89552,-69.26071 78.32854,-69.26071 0.36873,0 78.215809,68.7265 78.377839,69.19509 0.0402,0.11618 -1.73668,2.25316 -3.94858,4.74885 -3.41389,3.85191 -4.08286,4.4885 -4.42685,4.21263 -0.22288,-0.17873 -16.04436,-14.16877 -35.15886,-31.08897 -21.886419,-19.37392 -34.870439,-30.69208 -35.069109,-30.56976 -0.17352,0.10683 -15.85461,13.95063 -34.84687,30.764 -18.99226,16.81337 -34.7159697,30.71465 -34.9415704,30.89174 -0.34873,0.27375 -1.0022896,-0.35077 -4.3623596,-4.16843 z M 125.7158,174.97889 c -4.80219,-4.36527 -9.16008,-8.32805 -9.6842,-8.80618 l -0.95295,-0.86933 -0.19177,-5.85697 -0.19177,-5.85697 h 9.94212 9.9421 v 14.68437 c 0,8.07641 -0.0298,14.67483 -0.0661,14.66315 -0.0364,-0.0117 -3.99521,-3.5928 -8.79739,-7.95807 z');
        transform: scale(0.13,0.13) !important;
        transform-origin: 5% -70%;
    }
    
    button.button-toolbar.home {
        fill: #C600C6 !important;
    }
    

    And another:

    0_1544965874945_000.png

    
    /********************************************************************Home icon*******/
    
    button.button-toolbar.home svg path {
        d: path('M1960 6780 c-20 -20 -20 -33 -20 -1310 l0 -1290 2060 0 2060 0 0 1288 c0 1149 -2 1290 -16 1310 l-15 22 -648 0 c-615 0 -649 -1 -664 -18 -16 -17 -17 -95 -17 -920 l0 -902 -700 0 -700 0 0 903 c0 863 -1 905 -18 920 -17 15 -77 17 -660 17 -629 0 -642 0 -662 -20z M1573 4072 l-292 -2 -16 -52 c-19 -65 -19 -91 1 -159 15 -53 44 -83 1287 -1327 700 -700 1291 -1285 1314 -1299 58 -34 141 -41 219 -19 l59 17 1273 1272 c961 960 1280 1284 1300 1322 30 58 37 157 13 213 l-13 32 -2413 0 c-1328 0 -2419 1 -2427 3 -7 1 -144 1 -305 -1z M5357 2212 l-547 -547 0 -138 0 -137 555 0 555 0 0 685 c0 377 -3 685 -8 685 -4 0 -253 -246 -555 -548z');
        transform: scale(0.0035,0.0035) !important;
        transform-origin: 0% 0%;
    }
    
    button.button-toolbar.home {
        fill: #C600C6 !important;
    }
    
    
    

    Regards
    Read



  • Hello,
    Help needed to alter the following to work as a .css icon to be used as a task bar home icon, maintaining the two color fill:

    0_1545071182982_00.png

    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" id="vivaldi-icon"><path d="M16 32c7 0 10.91 0 13.45-2.54S32 23 32 16s0-10.9-2.55-13.44S23 0 16 0 5.09 0 2.55 2.54 0 9 0 16s0 10.9 2.55 13.44S9 32 16 32z" fill="#ef3939" /><path d="M24.43 7.53a12 12 0 1 0 0 16.94 12 12 0 0 0 0-16.94zM23.71 13l-5.93 10.35a2 2 0 0 1-1.63 1.08 1.89 1.89 0 0 1-1.88-1C13 21.27 11.79 19.11 10.55 17l-2.27-4a2 2 0 0 1 1.62-3 1.91 1.91 0 0 1 1.83 1c.56 1 1.1 1.92 1.66 2.88.4.69.79 1.39 1.2 2.07a3.13 3.13 0 0 0 2.62 1.62 3.19 3.19 0 0 0 3.36-2.84v-.33a3.35 3.35 0 0 0-.34-1.49A2 2 0 1 1 24 11.69a2.08 2.08 0 0 1-.29 1.31z" fill="#fff" /></svg>
    

    Regards
    Raed



  • @raed To change the size you can change the viewbox. What you need is an icon with transparency, like this:

    <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <path d="M16,32.0001433 C23.0111818,32.0001433 26.909069,32.0001433 29.4542934,29.4544367 C32,26.90873 32,23.0108428 32,16.0001433 C32,8.98896151 32,5.09107429 29.4542934,2.54584991 C26.909069,0.000143283582 23.0111818,0.000143283582 16,0.000143283582 C8.98881823,0.000143283582 5.09141324,0.000143283582 2.54570662,2.54584991 C0,5.09107429 0,8.98896151 0,16.0001433 C0,23.0108428 0,26.90873 2.54570662,29.4544367 C5.09141324,32.0001433 8.98881823,32.0001433 16,32.0001433" fill="#EF3939"></path>
    <path d="M23.5468657,12.9424478 C21.5896119,16.3482985 19.6304478,19.7517612 17.6760597,23.1590448 C17.3130746,23.7918806 16.7853134,24.1749254 16.0612537,24.2274627 C15.249791,24.286209 14.6126567,23.9437612 14.2038209,23.2397612 C12.9653731,21.1053134 11.7407761,18.9622687 10.5109254,16.8230448 C9.76298507,15.5210746 9.0121791,14.2210149 8.26758209,12.9176119 C7.51629851,11.6027463 8.36358209,10.0046567 9.87092537,9.92728358 C10.6671045,9.88620896 11.2808358,10.2534925 11.6848955,10.9460299 C12.2370149,11.8931343 12.7791045,12.8459701 13.3254925,13.7959403 C13.7195224,14.4803582 14.1054328,15.1695522 14.5109254,15.846806 C15.0974328,16.8297313 15.96,17.3842388 17.1077015,17.4530149 C18.7325373,17.5499701 20.2413134,16.3717015 20.4357015,14.6408358 C20.4505075,14.5109254 20.4600597,14.3819701 20.465791,14.3155821 C20.457194,13.7553433 20.352597,13.2834627 20.1305075,12.8383284 C19.5239403,11.6208955 20.1701493,10.2568358 21.4893134,9.9640597 C22.5634627,9.72620896 23.6748657,10.5171343 23.817194,11.6094328 C23.8792836,12.0894328 23.7847164,12.5293134 23.5468657,12.9424478 M24.2575522,7.47856716 C19.6232836,2.84047761 12.1099701,2.84047761 7.47570149,7.47856716 C2.84143284,12.1166567 2.84143284,19.6366567 7.47570149,24.2742687 C12.1099701,28.9123582 19.6232836,28.9123582 24.2575522,24.2742687 C28.8918209,19.6366567 28.8918209,12.1166567 24.2575522,7.47856716" fill="#FFFFFF"></path>
    </g>
    </svg>
    


  • @luetage
    Thanks, but using the following does not work for me in a .css file:

    button.button-toolbar.home svg path {
        <svg viewBox="0 0 32 32" version="1.1" 
    
    xmlns="http://www.w3.org/2000/svg" 
    
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <path d="M16,32.0001433 C23.0111818,32.0001433 26.909069,32.0001433 
    
    29.4542934,29.4544367 C32,26.90873 32,23.0108428 32,16.0001433 
    
    C32,8.98896151 32,5.09107429 29.4542934,2.54584991 
    
    C26.909069,0.000143283582 23.0111818,0.000143283582 
    
    16,0.000143283582 C8.98881823,0.000143283582 
    
    5.09141324,0.000143283582 2.54570662,2.54584991 C0,5.09107429 
    
    0,8.98896151 0,16.0001433 C0,23.0108428 0,26.90873 
    
    2.54570662,29.4544367 C5.09141324,32.0001433 8.98881823,32.0001433 
    
    16,32.0001433" fill="#EF3939"></path>
    <path d="M23.5468657,12.9424478 C21.5896119,16.3482985 
    
    19.6304478,19.7517612 17.6760597,23.1590448 C17.3130746,23.7918806 
    
    16.7853134,24.1749254 16.0612537,24.2274627 C15.249791,24.286209 
    
    14.6126567,23.9437612 14.2038209,23.2397612 C12.9653731,21.1053134 
    
    11.7407761,18.9622687 10.5109254,16.8230448 C9.76298507,15.5210746 
    
    9.0121791,14.2210149 8.26758209,12.9176119 C7.51629851,11.6027463 
    
    8.36358209,10.0046567 9.87092537,9.92728358 C10.6671045,9.88620896 
    
    11.2808358,10.2534925 11.6848955,10.9460299 C12.2370149,11.8931343 
    
    12.7791045,12.8459701 13.3254925,13.7959403 C13.7195224,14.4803582 
    
    14.1054328,15.1695522 14.5109254,15.846806 C15.0974328,16.8297313 
    
    15.96,17.3842388 17.1077015,17.4530149 C18.7325373,17.5499701 
    
    20.2413134,16.3717015 20.4357015,14.6408358 C20.4505075,14.5109254 
    
    20.4600597,14.3819701 20.465791,14.3155821 C20.457194,13.7553433 
    
    20.352597,13.2834627 20.1305075,12.8383284 C19.5239403,11.6208955 
    
    20.1701493,10.2568358 21.4893134,9.9640597 C22.5634627,9.72620896 
    
    23.6748657,10.5171343 23.817194,11.6094328 C23.8792836,12.0894328 
    
    23.7847164,12.5293134 23.5468657,12.9424478 M24.2575522,7.47856716 
    
    C19.6232836,2.84047761 12.1099701,2.84047761 7.47570149,7.47856716 
    
    C2.84143284,12.1166567 2.84143284,19.6366567 7.47570149,24.2742687 
    
    C12.1099701,28.9123582 19.6232836,28.9123582 24.2575522,24.2742687 
    
    C28.8918209,19.6366567 28.8918209,12.1166567 24.2575522,7.47856716" 
    
    fill="#FFFFFF"></path>
    </g>
    </svg>
    }
    

    How do I translate the above format to the following format:

    button.button-toolbar.home svg path {
        d: path('M1960 6780 c-20 -20 -20 -33 -20 -1310 l0 -1290 2060 0 2060 0 0 1288 c0 1149 -2 1290 -16 1310 l-15 22 -648 0 c-615 0 -649 -1 -664 -18 -16 -17 -17 -95 -17 -920 l0 -902 -700 0 -700 0 0 903 c0 863 -1 905 -18 920 -17 15 -77 17 -660 17 -629 0 -642 0 -662 -20z M1573 4072 l-292 -2 -16 -52 c-19 -65 -19 -91 1 -159 15 -53 44 -83 1287 -1327 700 -700 1291 -1285 1314 -1299 58 -34 141 -41 219 -19 l59 17 1273 1272 c961 960 1280 1284 1300 1322 30 58 37 157 13 213 l-13 32 -2413 0 c-1328 0 -2419 1 -2427 3 -7 1 -144 1 -305 -1z M5357 2212 l-547 -547 0 -138 0 -137 555 0 555 0 0 685 c0 377 -3 685 -8 685 -4 0 -253 -246 -555 -548z');
        transform: scale(0.0035,0.0035) !important;
        transform-origin: 0% 0%;
    }
    

    to make it work in a custome.css file?

    Regards
    Raed


 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.